Question

我会做这样的事情：

enter image description here

CSS：

#container{

    width: 970px;
    margin: 0px auto;
}

#backdrop-slider img{ 
    position: fixed; /* <---- Problem should be here! */
    left: 0;
    right: 0;
    margin: 0px;
    width: 100%;
    height: 200px;
}  

#content{
    margin-top: 250px;
    width: 100%
}

HTML：

<body lang="en">
<div id="container">

    <div id="header">
        <h1>TITLE</h1>

        <div id="backdrop-slider">
            <img src="http://cf2.imgobject.com/t/p/original/fI3ucpgaVKOUcQ82vhgWmWuLlg2.jpg">
        </div> 
    </div>

    <div id="content">

        <div id="switcher">
          <p>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </p>
        </div>

        <div id="covers">

            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">

            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
        </div>


    </div>


</div>

</body>

但是，通过这种方式，如果我向下滚动，我会得到这个： enter image description here 我会在向下滚动时“背景滑块”上升

Answer 1

为背景图片添加z-index:-1;。（或内容的正面索引）

http://jsfiddle.net/K5KjY/4/

此外，如果您希望div在滚动时消失，请使用position:absolute;而不是固定。

两个div交叉

1 个答案: