CSS 父子位置固定，父子溢出：隐藏错误

parent & child with position fixed, parent overflow:hidden bug

提问by kirkas

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

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

Here's an example:

下面是一个例子：

CSS and HTML:

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>

Live demo: jsFiddle

现场演示：jsFiddle

采纳答案by j08691

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.

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

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

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

回答by lmeurs

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

您可以考虑使用 CSSclip: rect(top, right, bottom, left);将固定定位的元素剪辑到父元素。请参阅http://jsfiddle.net/lmeurs/jf3t0fmf/ 上的演示。

Beware, use with care!

当心，小心使用！

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

尽管剪辑样式得到广泛支持，但主要缺点是：

1. The parent's position cannot be static or relative (one can use an absolutely positioned parent inside a relatively positioned container);
2. The rect coordinates do not support percentages, though the autovalue equals 100%, ie. clip: rect(auto, auto, auto, auto);;
3. 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.

1. 父级的位置不能是静态的或相对的（可以在相对定位的容器内使用绝对定位的父级）；
2. 矩形坐标不支持百分比，但auto值等于100%，即。clip: rect(auto, auto, auto, auto);;
3. 至少在 IE11 和 Chrome34 中，子元素的可能性受到限制，即。我们不能将子元素的位置设置为相对或绝对，也不能使用 CSS3 变换，如缩放。

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

有关更多信息，请参阅http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/。

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:

编辑：当应用backface-visibility 时，Chrome 似乎可以更好地处理子元素上的定位和 CSS3 转换，因此请确保我们添加了：

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

另请注意，旧版/移动浏览器并不完全支持它，否则可能需要付出一些额外的努力。在bellafuchsia.com 上查看我们的菜单实现。

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

1. IE8显示菜单很好，但菜单链接不可点击；
2. IE9 不显示折叠下的菜单；
3. iOS Safari <5 不能很好地显示菜单；
4. iOS Safari 5+ 滚动后在滚动时重新绘制剪切的内容；
5. FF（至少 13+）、IE10+、Chrome 和 Chrome for Android 似乎都不错。

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

编辑 2014-11-02：演示 URL 已更新。

回答by Hugo H

2016 update:

2016年更新：

You can create a new stacking context, as seen on Coderwall:

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

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

Which refers to http://dev.w3.org/csswg/css-transforms/#transform-rendering

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

For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

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

回答by ZhenyaUsenko

As an alternative to using clip you could also use {border-radius: 0.0001px}on a parent element. It works not only with absolute/fixed positioned elements.

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

回答by Nick F

If you want to hide overflow on fixed-position elements, the simplest approach I've found is to place the element inside a container element, and apply position:fixedand overflow:hiddento that element instead of the contained element (you must remove position:fixedfrom the contained element for this to work). The content of the fixed container should then be clipped as expected.

如果你想隐藏固定位置元素上的溢出，我发现的最简单的方法是将元素放在一个容器元素中，然后应用position:fixed和overflow:hidden到那个元素而不是被包含的元素（你必须position:fixed从被包含的元素中删除这个上班）。然后应按预期裁剪固定容器的内容。

In my case I was having trouble with using object-fit:coveron a fixed-position element (it was spilling outside the bounds of the page body, regardless of overflow:hidden). Placing it inside a fixed container with overflow:hiddenon the container fixed the issue.

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

回答by Katja Deutschmann

I had a similar, quite complex problem with a fluid layout, where the right column had a fixed width and the left one had a flexible width. My fixed container should have the same width as the flexible column. Here is my solution:

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

HTML

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

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

Live Demo: http://jsfiddle.net/hWCub/

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

回答by daGUY

Fixed position elements are positioned relative to the browser window, so the parent element is basically irrelevant.

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

To get the effect you want, where the overflowon the parent clips the child, use position: absoluteinstead: http://jsfiddle.net/DBHUv/1/

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