Why Doesn't `overflow: hidden` Work on Fixed Positioned Parent/Child Elements in CSS?

Overflow:hidden Ineffective on Positioned Parent/Child Elements: An Issue or By Design?

In CSS, the overflow:hidden property conceals content that extends beyond the boundaries of its container element. However, unexpected behavior occurs when attempting to utilize this property on an element positioned as fixed, with fixed child elements. The expected overflow truncation does not occur.

Example:

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
}
.children {
  position: fixed;
  top: 200px;
  left: 200px;
  width: 150px;
  height: 150px;
  background: #333;
}

Explanation:

This issue arises from a limitation in CSS: overflow:hidden only effectively conceals content within an element's flow. Positioned elements, as with position:fixed, are removed from the normal flow and do not participate in the handling of overflow.

Alternative Solution: CSS Clip Property

To achieve the desired overflow clipping behavior on positioned elements, consider using the clip property. It allows you to define rectangular areas within an element that are visible or hidden.

Example:

.parent {
  position: fixed;
  clip: rect(0px, 300px, 300px, 0px);
  width: 300px;
  height: 300px;
  background: #555;
}

Cautions:

• The parent element's position cannot be static or relative.
• Rect coordinates do not support percentages (except for ‘auto’).
• Child elements may have positioning limitations in certain browsers, such as IE and Chrome.

Additional Considerations:

• Add backface-visibility: hidden; to improve handling of child element positioning and CSS3 transforms.
• Mobile browsers and older versions may have limited support for the clip property.

The above is the detailed content of Why Doesn't `overflow: hidden` Work on Fixed Positioned Parent/Child Elements in CSS?. For more information, please follow other related articles on the PHP Chinese website!