Why Doesn\'t `overflow: hidden` Work on an Absolutely Positioned Inner DIV Unless the Outer DIV is Positioned Relatively?

Position Absolute and Overflow Hidden

When dealing with nested DIVs, it can be challenging to control the display of the inner DIV within the confines of the outer DIV, especially when using properties like overflow hidden. This question examines a specific scenario where the outer DIV is not positioned absolute, causing the inner DIV positioned absolutely to ignore the overflow hidden directive of the outer DIV.

To address this issue, the proposed solution involves changing the positioning of the outer DIV to relative and maintaining the absolute positioning of the inner DIV. Here's how it works:

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

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

By setting the outer DIV to position: relative, you establish a new coordinate system within that element, which serves as the reference point for the inner DIV's position. This allows the inner DIV to remain anchored to the outer DIV while adhering to the overflow hidden constraint of the outer DIV. In this configuration, the inner DIV's content will be clipped within the bounds of the outer DIV.

Alternatively, you can also consider using position: fixed for the inner DIV, which will fix its position relative to the viewport rather than the outer DIV. This approach might provide more control over the inner DIV's placement, especially if you need to position it outside the bounds of the outer DIV.

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