Question

我在想;如何在图像滑块上显示div。现在div落在滑块后面。 Z-index没有帮助，我也尝试了一个位置：绝对但是更加混乱。这是我的例子：http://gelijkanders.com/nieuw/template-devotion/

HTML：

 <div id="header">
            <img src="assets/images/header1.png" />
            <img src="assets/images/header2.png" />
        </div>   


 <div class="wrapper">  

        <div class="container">    


                <div id="headlight-left">
                    <img src="assets/images/casablanca.png"/>

                        <h1>Casa Blanca</h1>

                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis. </p>

                                    <a class="button" href="#">Lees meer</a>

                </div>

                    <div id="headlight-center">
                        <img src="assets/images/sealicious.png"/>

                            <h1>Casa Blanca</h1>

                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis. </p>
                                <a class="button" href="#">Lees meer</a>
                    </div>

                        <div id="headlight-right">
                            <img src="assets/images/cielo.png"/>

                                <h1>Casa Blanca</h1>

                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis. </p>
                                            <a class="button" href="#">Lees meer</a>
                        </div>



            <div id="content">
                <h1>We are W Travel</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna pretium, venenatis tellus nec, scelerisque nisi. Vestibulum sapien risus, adipiscing vel interdum non, euismod in nisi. Nullam in ultrices est, vel sodales nisl. Donec sodales aliquam diam, eu hendrerit felis fringilla eget. lobortis.</p>

            </div>

和css：

#header {
    height:464px;
    width:1920px;
    position:relative;
    overflow:hidden;
    z-index:-99;
}

#headlight-left {
    background:url(images/headlights-bg.png);
    background-repeat:repeat-y;
    width:289px;
    height:464px;
    float:left;
    padding:15px;
    position:relative;
    margin-top:-138px;
    z-index:99999;
}

#content {
    width:648px;    
    padding:20px;
    position:relative;
    top:20px;
    float:left;
    display:block;

}

我希望这有任何意义，你能够看到我的问题，因为我知道它在某种程度上是可能的。无论如何，提前谢谢!!

Answer 1

我不知道我是否理解，但如果问题是滑块位于容器上方，解决方案很简单，请将overflow:hidden;移至.container{}

enter image description here

Answer 2

这就是你要找的东西 http://jsfiddle.net/cancerian73/zdBRk/

.container {
width:1024px;
margin:0 auto;
position:relative;
/*overflow:hidden;*/ 
padding:20px;
    }

你想让它重叠或在jquery循环横幅之后开始吗？

div与文本图像滑块

2 个答案: