问一下一个css的问题,麻烦各位大大了,谢谢

FLIGHT 发布于 2012/11/16 13:56
阅读 162
收藏 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#mask_profession{ background:#FFF; border: 1px solid #C4C4C4; color: #686868; position: relative;}
.seqencing_date_cla{position: relative; width: 114px; z-index:999;}
.seqencing_date_cla a{ color:#000;}
.seqencing_date_cla li{ margin:10px; border-bottom:1px dashed #cfcfcf; padding-bottom:6px;}
</style>
</head>
<body>
<span id="base_profession">
    <span class="seqencing_date"><a href="###" id="profession">wwwwww</a></span>
    <ul class="seqencing_date_cla" id="mask_profession" style="">
        <li><a href="###">1</a></li>
        <li><a href="###">2</a></li>
        <li><a href="###">3</a></li>
        <li><a href="###">4</a></li>
        <li><a href="###">5</a></li>
    </ul>
</span>
<div>666666666</div>
</body>

</html>


这个HTML里面的CSS的z-index:999;为什么没有效?

加载中
0
SeekerLee
SeekerLee
z-index不能改变文档流。试试float,absolute
0
SeekerLee
SeekerLee
你想要啥效果?
0
FLIGHT
FLIGHT

引用来自“SeekerLee”的答案

你想要啥效果?

这样


0
IT好男人
IT好男人
relative  改为 absolute
0
FLIGHT
FLIGHT

引用来自“victorhuang”的答案

relative  改为 absolute
absolute用这个样式别人的浏览器和我的不一样大,样式变了的
0
wartskcaj
wartskcaj
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style> 
#mask_profession{ background:#FFF; border: 1px solid #C4C4C4; color: #686868; position: relative;} 
.seqencing_date_cla{position: relative; width: 114px; z-index:999;} 
.seqencing_date_cla a{ color:#000;} 
.seqencing_date_cla li{ margin:10px; border-bottom:1px dashed #cfcfcf; padding-bottom:6px;} 
</style> 
</head> 
<body> 
<span id="base_profession"> 
    <span class="seqencing_date"><a href="###" id="profession">wwwwww</a></span> 
    <ul class="seqencing_date_cla" id="mask_profession" style=""> 
        <li><a href="###">1</a></li> 
        <li><a href="###">2</a></li> 
        <li><a href="###">3</a></li> 
        <li><a href="###">4</a></li> 
        <li><a href="###">5</a></li> 
    </ul> 
</span> 
<div>666666666</div> 
</body> 
</html>
0
北河
北河
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#base_profession{position:relative;}
#mask_profession{ background:#FFF; border: 1px solid #C4C4C4; color: #686868; position: absolute;display:none;}
.seqencing_date_cla{width: 114px; z-index:999;}
.seqencing_date_cla a{ color:#000;}
.seqencing_date_cla li{ margin:10px; border-bottom:1px dashed #cfcfcf; padding-bottom:6px;}
#base_profession:hover #mask_profession{display:block;}
</style>
</head>
<body>
<div id="base_profession">
    <span class="seqencing_date"><a href="###" id="profession">wwwwww</a></span>
    <ul class="seqencing_date_cla" id="mask_profession" style="">
        <li><a href="###">1</a></li>
        <li><a href="###">2</a></li>
        <li><a href="###">3</a></li>
        <li><a href="###">4</a></li>
        <li><a href="###">5</a></li>
    </ul>
</div>
<div>666666666</div>
</body>

</html>

你想要的是鼠标划过或点击出现个菜单把?外部的base_profession要position:relative;然后列表position:absolute。增加了一个hover的伪类选择器,实现划过出现菜单,不过要火狐,chrome或高版本ie才行。下面看看是不是你想要的。


0
FLIGHT
FLIGHT

引用来自“SeekerLee”的答案

z-index不能改变文档流。试试float,absolute
谢谢各位了,解决了,在<span id="base_profession">加 position:relative; 然后在 id="mask_profession"加position:absolute; z-index:999;样式就不会随着浏览器的大小变了
返回顶部
顶部