Why Doesn\'t Overflow:hidden Work with Absolutely Positioned Inner DIVs Unless the Outer DIV is Positioned Relatively?

Overflow Hidden and Absolute Positioning

In a scenario with nested DIVs, where the outer DIV has an overflow: hidden property and the inner DIV is positioned absolutely, the inner DIV may not adhere to the overflow constraints of the outer DIV. This occurs when the outer DIV is not positioned absolutely as well. Altering the outer DIV to position: absolute can disrupt the overall layout.

To address this issue while maintaining the desired positioning of the inner DIV within a table cell, another approach can be employed:

1. Set the outer DIV to position: relative. This establishes a new coordinate system for the inner DIVs.
2. Change the inner DIV's position to position: absolute. This positions the inner DIV relative to its closest positioned ancestor, which in this case is the outer DIV.

Example:

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    position: relative;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: absolute;
    left: 0px;
    top: 0px;
}

<table>

With this adjustment, the overflow: hidden property of the outer DIV will now properly constrain the inner DIV, preventing its content from extending beyond the boundaries of the outer DIV. Additionally, this solution allows the inner DIV to grow outside of the table cell, as intended.

The above is the detailed content of Why Doesn\'t Overflow:hidden Work with Absolutely Positioned Inner DIVs Unless the Outer DIV is Positioned Relatively?. For more information, please follow other related articles on the PHP Chinese website!