css - 父子位置固定，父子溢出：隐藏的错误

Question

我不知道是否有问题，但我想知道为什么在父/子元素overflow:hidden上不起作用。fixed

这是一个例子：

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

score 98 · Accepted Answer

You could consider using CSS clip: rect(top, right, bottom, left); to clip a fixed positioned element to a parent. See demo at http://jsfiddle.net/lmeurs/jf3t0fmf/.

Beware, use with care!

Though the clip style is widely supported, main disadvantages are that:

The parent's position cannot be static or relative (one can use an absolutely positioned parent inside a relatively positioned container);
The rect coordinates do not support percentages, though the auto value equals 100%, ie. clip: rect(auto, auto, auto, auto);;
Possibillities with child elements are limited in at least IE11 & Chrome34, ie. we cannot set the position of child elements to relative or absolute or use CSS3 transform like scale.

See http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ for more info.

EDIT: Chrome seems to handle positioning of and CSS3 transforms on child elements a lot better when applying backface-visibility, so just to be sure we added:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

to the main child element.

Also note that it's not fully supported by older / mobile browsers or it might take some extra effort. See our implementation for the menu at bellafuchsia.com.

IE8 shows the menu well, but menu links are not clickable;
IE9 does not show the menu under the fold;
iOS Safari <5 does not show the menu well;
iOS Safari 5+ repaints the clipped content on scroll after scrolling;
FF (at least 13+), IE10+, Chrome and Chrome for Android seem to play nice.

EDIT 2014-11-02: Demo URL has been updated.

score 52 · Accepted Answer

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

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

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

score 40 · Accepted Answer

2016 年更新：

您可以创建一个新的堆叠上下文，如Coderwall 所示：

<div style="transform: translate3d(0,0,0);overflow:hidden">
   <img style="position:fixed; ..." />
</div>

指的是http://dev.w3.org/csswg/css-transforms/#transform-rendering

对于布局由 CSS 盒模型控制的元素，除了 none 之外的任何转换值都会导致创建堆叠上下文和包含块。该对象充当固定定位后代的包含块。

score 8 · Accepted Answer

作为使用剪辑的替代方法，您还可以{border-radius: 0.0001px}在父元素上使用。它不仅适用于绝对/固定定位元素。

score 3 · Accepted Answer

如果要隐藏固定位置元素上的溢出，我发现的最简单的方法是将元素放在容器元素内，然后将position:fixedandoverflow:hidden应用于该元素而不是包含的元素（为此，您必须position:fixed从包含的元素中删除去工作）。然后应按预期剪切固定容器的内容。

在我的情况下，我在使用object-fit:cover固定位置元素时遇到了麻烦（它溢出了页面主体的边界，不管overflow:hidden）。将其放置在固定容器中并overflow:hidden在容器上解决了该问题。

score 0 · Accepted Answer

我在流畅的布局中遇到了一个类似的、非常复杂的问题，其中右列具有固定宽度，而左列具有灵活宽度。我的固定容器应该与灵活列具有相同的宽度。这是我的解决方案：

HTML

<div id="wrapper">
    <div id="col1">
    <div id="fixed-outer">
        <div id="fixed-inner">inner</div>
    </div>
    COL1<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div id="col2">COL2</div>
</div>

CSS

    #wrapper {
    padding-left: 20px;
}

#col1 {
    background-color: grey;
    float: left;
    margin-right: -200px; /* #col2 width */
    width: 100%;
}

#col2 {
    background-color: #ddd;
    float: left;
    height: 400px;
    width: 200px;
}

#fixed-outer {
    background: yellow;
    border-right: 2px solid red;
    height: 30px;
    margin-left: -420px; /* 2x #col2 width + #wrapper padding-left */
    overflow: hidden;
    padding-right: 200px; /* #col2 width */
    position: fixed;
    width: 100%;
}

#fixed-inner {
    background: orange;
    border-left: 2px solid blue;
    border-top: 2px solid blue;
    height: 30px;
    margin-left: 420px; /* 2x #col2 width + #wrapper padding-left */
    position: absolute;
    width: 100%;
}

现场演示：http: //jsfiddle.net/hWCub/

score 0 · Accepted Answer

固定位置元素是相对于浏览器窗口定位的，所以父元素基本上是无关紧要的。

要获得您想要的效果，在overflow父剪辑子的位置，请position: absolute改用：http: //jsfiddle.net/DBHUv/1/

score 0 · Accepted Answer

如果您的用例有意义，这不是确切的答案，而是解决该问题的一个方便技巧。接受的答案是正确的。

一个简单的技巧是z-index在父相关容器上与下面和/或上面的另一个隐藏元素一起使用。

例子

html:

<div class="parent">
  <button class="child">
    Click Me
  </button>
</div>

<div class="sibling">
  <h1>Some Header</h1>
  
  <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  </p>
</div>

css

body {
  margin: 0px;
  padding: 0px;
}

.parent {
  background-color: blue;
  height: 500px;
  padding: 30px;
  position: relative;
  text-align: center;
  z-index: 1;
}

.child {
  padding: 10px;
  position: fixed;
  top: 100px;
}

.sibling {
  background: white;
  min-height: 500px;
  padding: 30px;
  position: relative;
  z-index: 2;
}

css - 父子位置固定，父子溢出：隐藏的错误

8 回答 8

例子

Related

Reference