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

Overflow:hidden Not Working on Fixed Parent/Children Element

Question:

Why doesn't the overflow:hidden property function on fixed parent/children elements?

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;
}

<div class="parent">
  <div class="children"></div>
</div>

Answer:

CSS clip: rect() can clip a fixed positioned element to its parent. However, it has some caveats:

• The parent's position cannot be static or relative.
• Percentages are not supported for the rect coordinates (although auto is equivalent to 100%).
• Child elements may have limited positioning and CSS3 transform options.

See the updated JSFiddle demo for an example of using clip: rect().

Additional Notes:

• Use backface-visibility: hidden on child elements for improved support in Chrome.
• Support for older and mobile browsers may be limited.

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