溢出的相对父级：隐藏，固定子级不服从

Question

我正在尝试使用 overflow:hidden 创建一个 relative 定位的元素，其中包含一些 fixed 定位的元素。目标是让 fixed 子元素随着父元素的移动而隐藏，有点像它们是 background-image 的一部分，父元素上有 attachment:fixed。

根据 Whosebug 和网络其他地方的所有帐户，这是不可能的，因为固定元素只考虑浏览器 window 而忽略其父元素。但是，无论出于何种原因，它实际上仅在 Chrome 中按预期工作：http://jsfiddle.net/x6avvhuf/

这是 fiddle 的样子，在 Chrome 和 IE/Firefox 中查看不同之处：

HTML

<body>
<div id = "headwrapper">
    I am the relative parent element
    <div class = "fixedchild">
        I am a fixed child element
    </div>
</div>
<div id = "content">
    This is the main content portion of the page<br>
    <!-- Repeat until the page scrolls -->
    This is the main content portion of the page<br>
</div>

CSS

body {
   background-color: yellow;
}

#headwrapper {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
    z-index: -1;
    background-color: black;
    color: white;
    text-align: center;
}

.fixedchild {
    position: fixed;
    width: 75%;
    height: 40px;
    z-index: 48;
    top: 22.5%;
    left: 50%;
    margin: 0 0 0 -37.5%;
    text-align: center;
    color: red;
    background-color: pink;
}

有什么替代解决方案？我读到可以使 absolute 元素的行为类似于具有 CSS 的 fixed 元素，但到目前为止我无法完成这项工作。在此先感谢您的帮助或建议！ :)

Answer 1

更新

有时最好的解决方案是最简单的。鉴于您发布的代码，您所要做的就是在 #content 上设置一个 background-color（例如：在本例中为 yellow 以匹配 body），因为您的固定元素具有z-index: -1 无论如何都会坐在它后面：

#content{
   background: yellow;
   width: 100%;
}

CSS EXAMPLE 1

或

您可以将 #content 设置为 position:relative，这样您就可以用 z-index 来订购这个和固定的 div（这可能更好，使用 z-index: -1 有点像 hack):

CSS

.fixedchild {
   position: fixed;  
   width: 75%;
   height: 40px;
   z-index: 1; //set to 1
   top: 22.5%;
   left: 50%;
   margin: 0 0 0 -37.5%;
   text-align: center;
   color: red;
   background-color: pink;
}

#content{
   background: yellow;
   width: 100%;
   position: relative; //add
   z-index: 2; //set higher
}

CSS EXAMPLE 2

(上一个答案):

免责声明：这不是CSS解决方案。

对此可能有 CSS 解决方案。我没有碰巧知道一个，但我知道这可以很容易地用 Jquery

完成

JS

$(window).scroll(function(){
   var scrolled = $(this).scrollTop()+100; //offset starting position which I hard coded to top: 100px - you can change as needed
   $(".fixedchild").css({"top": scrolled+"px"});  
});

CSS

.fixedchild {
   position: absolute;
   width: 75%;
   height: 40px;
   z-index: 48;
   top: 100px;
   left: 50%;
   margin: 0 0 0 -37.5%;
   text-align: center;
   color: red;
   background-color: pink;
}

JS EXAMPLE

溢出的相对父级：隐藏，固定子级不服从

Relative parent with overflow: hidden, fixed child does not obey

html

css

cross-browser

或