父母&子位置固定，父溢出：隐藏错误 [英] parent & child with position fixed, parent overflow:hidden bug

问题描述

我不知道是否有问题，但我想知道为什么 overflow：hidden 不能在固定
$ b CSS和HTML：

  .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>  

演示： jsFiddle

解决方案

因为固定位置元素相对于视口是固定的，而不是另一个元素。因此，由于视口没有被切掉，溢出变得无关紧要。

而元素的位置和尺寸与
position：absolute相对于其包含块，位置
和具有position：fixed的元素的维度总是相对于初始包含块的相对
。这通常是视口：
浏览器窗口或纸张页面框。

ref： http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

I don't know if there is an issue, but I was wondering why the overflow:hidden does not function on fixed parent/children element.

Here's an example:

CSS and HTML:

.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>

Live demo: jsFiddle

解决方案

Because a fixed position element is fixed with respect to the viewport, not another element. Therefore since the viewport isn't cutting it off, the overflow becomes irrelevant.

Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.

ref: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

这篇关于父母&子位置固定，父溢出：隐藏错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！