css 中 z-index的问题
htiml文件<bodyid="home"><divid="masthead"><divid="main-image"></div><ulid="nav"><liid="...
htiml文件
<body id="home">
<div id="masthead">
<div id="main-image"></div>
<ul id="nav">
<li id="nav-home"><span>I</span> <a href="#">Home</a><br/></li>
<li id="nav-reservations"><span>II</span> <a href="#">Reservations</a><br/></li>
<li id="nav-amenities"><span>III</span> <a href="#">Amenities</a><br/></li>
</ul>
</div>
</body>
css文件
br{
clear:both;
}
#masthead{
position:relative;
background: #f7f7f4 url(../img/bg_repeat.gif) repeat-x;
height:15.4em;
}
#main-image{
position:absolute;
top:0;
z-index:2;
width:566px;
height:246px;
background: url(../img/main-image.jpg) no-repeat;
}
ul #nav{
margin:0;
padding:0;
list-style:none;
z-index:4;/*为什么我的z-index:4不管用，这个div块中的内容还是在id为main-image的背景图像的底下，我想让id为nav的ul元素在最上面,怎么办？*/
}
#nav li{
margin:8px 0;
padding-top:1px;
font:.6em Gerogia, serif;
color:#777;
text-transform:uppercase;
letter-spacing:1px;
background: url(../img/bg_dotted.gif) repeat-x 0 77% !important;
background-position:0 61%;
}
#nav li a{
float:left;
background:#fff;
color:#777;
text-decoration:none;
padding:1px 3px;
}
ul#nav li span{
display:block;
float:right;
padding:1px 3px;
background:#fff;
} 展开
<body id="home">
<div id="masthead">
<div id="main-image"></div>
<ul id="nav">
<li id="nav-home"><span>I</span> <a href="#">Home</a><br/></li>
<li id="nav-reservations"><span>II</span> <a href="#">Reservations</a><br/></li>
<li id="nav-amenities"><span>III</span> <a href="#">Amenities</a><br/></li>
</ul>
</div>
</body>
css文件
br{
clear:both;
}
#masthead{
position:relative;
background: #f7f7f4 url(../img/bg_repeat.gif) repeat-x;
height:15.4em;
}
#main-image{
position:absolute;
top:0;
z-index:2;
width:566px;
height:246px;
background: url(../img/main-image.jpg) no-repeat;
}
ul #nav{
margin:0;
padding:0;
list-style:none;
z-index:4;/*为什么我的z-index:4不管用，这个div块中的内容还是在id为main-image的背景图像的底下，我想让id为nav的ul元素在最上面,怎么办？*/
}
#nav li{
margin:8px 0;
padding-top:1px;
font:.6em Gerogia, serif;
color:#777;
text-transform:uppercase;
letter-spacing:1px;
background: url(../img/bg_dotted.gif) repeat-x 0 77% !important;
background-position:0 61%;
}
#nav li a{
float:left;
background:#fff;
color:#777;
text-decoration:none;
padding:1px 3px;
}
ul#nav li span{
display:block;
float:right;
padding:1px 3px;
background:#fff;
} 展开
展开全部
z-index是必须盒子是定位的情况下才有效的，比如绝对定位或者相对定位等，如果不想盒子位置移动，可以加个相对定位试试
而且你ul #nav选择器也写错了，中间没有空格，或者干脆不要写ul
ul#nav {
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 4;
}
而且你ul #nav选择器也写错了，中间没有空格，或者干脆不要写ul
ul#nav {
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 4;
}
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
