或

Question

我正在尝试使用relative创建一个overflow:hidden - 定位元素，其中包含一些fixed - 位置元素。目标是在父元素移动时隐藏fixed子元素，就像它们是父元素上background-image的{{1}}的一部分一样。

通过StackOverflow和Web上其他地方的所有帐户，这是不可能的，因为固定元素只关注浏览器窗口并忽略其父元素。但是，无论出于何种原因，它实际上只能在Chrome中使用：http://jsfiddle.net/x6avvhuf/

以下是小提琴的样子，在Chrome浏览器和IE / Firefox中查看它，看看差异：

HTML

attachment:fixed

CSS

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

对此有什么替代解决方案？我已经读过，可以使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; }元素与CSS的absolute元素相似，但到目前为止我无法完成这项工作。在此先感谢您的任何帮助或建议！：）

Answer 1

<强>更新

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

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

CSS EXAMPLE 1

或

您可以将#content设置为position:relative，这样您就可以使用z-index订购这个和您的固定div（这可能更好，使用z-index: -1就是一种劈）：

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

（上一个回答）：

DISCLAMIER ：这不是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

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

1 个答案:

或