div 在图像滑块上带有文本答案

【问题标题】：div's with text over image sliderdiv 在图像滑块上带有文本
【发布时间】：2013-08-05 18:50:50
【问题描述】：

我在想；如何在图像滑块上显示 div。现在 div 落在滑块后面。 Z-index 没有帮助，我也尝试了一个 position: absolute ，但这更糟。这是我的例子：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;

}

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

【问题讨论】：

你粘贴了很多代码。但对问题的描述很少。请编辑并告诉，哪个是滑块的 div，哪个是你看不到的 div……链接没问题。但我没有看到任何滑块...可能是因为下载滑块的 Jquery 时出错

标签： css image html slider

【解决方案1】：

不知道看懂了没有，不过如果问题是滑块在容器上方，解决方法很简单，去掉overflow:hidden;改为.container{}

【讨论】：

天哪，就是这样！非常感谢你，你是英雄。

【解决方案2】：

这是你要找的吗 http://jsfiddle.net/cancerian73/zdBRk/

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

你希望它在 jquery 循环横幅之后重叠还是开始？

【讨论】：