How Can I Make an Absolutely Positioned Inner DIV Respect its Parent\'s Overflow:hidden Property?

Position Absolute vs. Overflow Hidden

Dilemma:

We have two nested DIVs: an outer DIV with overflow: hidden and an inner DIV positioned absolutely. By default, the inner DIV will not adhere to the outer DIV's overflow behavior. How can we maintain this behavior without altering the outer DIV's position to absolute, which would disrupt our layout?

Solution:

To ensure the inner DIV respects the outer DIV's overflow property:

1. Change the outer DIV's position to relative.
2. Maintain the inner DIV's absolute positioning.

Example:

#outer {
  width: 200px;
  height: 200px;
  background-color: green;
  overflow: hidden;
  position: relative;  // Make outer DIV relative
}

#inner {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;  // Keep inner DIV absolute
  left: 250px;
  top: 250px;
}

Additional Notes:

• Using position: relative for the outer DIV does not affect its display or layout.
• The inner DIV must remain position: absolute to "escape" the boundaries of the outer DIV while still respecting its overflow behavior.
• For the specific case of having an inner DIV growing out of a table cell, the solution remains the same. By positioning the outer table cell to relative and the inner DIV to absolute, you achieve the desired effect.

The above is the detailed content of How Can I Make an Absolutely Positioned Inner DIV Respect its Parent\'s Overflow:hidden Property?. For more information, please follow other related articles on the PHP Chinese website!