Question

我有一些代码想要使导航高于滑块bg。所以我将position:absolute插入.slider

<div class="nav">
        nav
</div>
<div class="slider"><img src="http://lorempixel.com/400/200/"></div>
<div class="content">content</div>



.nav{
    z-index:99999;
    color:#F00;
    background:transparant;
}
.slider{
    z-index:1;
    top:0 !important;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    right:0;
}

问题是，我的内容变成了我的导航后，我的内容低于我的滑块而没有看到它。如何预测这个使用绝对位置的问题，所以我的网站仍然看起来

[[nav]slider

]
[content]

小提琴：http://jsfiddle.net/luisan/dX49K/

Answer 1

将其他div定位为相对位置，例如：

demo here

<强> HTML

<div id="cont">
    <div class="nav">all nav</div>
    <div class="slider">my slider</div>
    <div class="content">my content</div>
</div>

<强> CSS

html,body,#cont {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.nav {
    border:1px solid red;
    width:100%;
    height:10%;
    position:relative;/* added */
}
.slider {
    position:absolute;
    border:1px solid green;
    left:0;/* added */
    right:0;/* added */
    height:20%;/* added */
}
.content {
    border:1px solid black;
    position:relative;/* added */
    top:20%;/* added - same as absolute div height */
}

Answer 2

z-index将显示您内容的正面或背面

<div class="nav"><!--all nav--></div>
<div class="slider"><!--my slider--></div>
<div class="content"><!--my content--></div>

<强> CSS

nav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999; 
    height: 50px;
    width: 100%;
    background-color: #000;
}
.slider{
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 999;
    height: 300px;
}
.content {
    position: absolute;
    top: 300px;
    left: 0;
    z-index: 9999;
}

当你的z-index高于上部div时，如果你的一个div z-index是9而另一个是99则那么99 div就是前面的那个;

关于z-index的最佳例子。 http://css-tricks.com/almanac/properties/z/z-index/

我的文字看起来背后的位置绝对

2 个答案: