关于CSS position z-index的应用

foxion · 发表于 2007-11-24 20:09:27

加入城市，听原创电台，写情感文字，分享你的一切。

您需要登录才可以下载或查看，没有帐号？注册居民

x

最近一直在看CSS标准制作。改掉TABLE当然好``

position是一个定位元素，我们用的是absolute绝对定位

然后是通过Z-index来控制层叠顺序``所设定的数字越大就在越上面

共有四个容器

即menu menu2 menu3 menu4

menu menu2 为一组m enu3 menu4为一组

postion绝对定位是与其它内容分离的，有自己的X 和Y轴属性。所以算好位置就实现了``

把内容部分的Z-index设置比投影块的属性高就行了

效果还可以``哦

效果图如下

div{
text-align:center;
width:90%;
color:#ffffff;
height:31px;
border:1px dashed #98ceea;
line-height:31px;
background:#4682b4 repeat:x 0 0;
}
.menu{
color:#32cd32;
width:70px;
height:80px;
background:#adff2f;
position:absolute;
left:80px;
top:70px;
z-index:2;
border:2px dashed #ffffff;
}
.menu2{
color:#32cd32;
width:70px;
height:80px;
background:#556b2f;
position:absolute;
left:90px;
top:73px;
z-index:0;
}
.menu3{
color:#32cd32;
width:70px;
height:80px;
background:#ffd700;
position:absolute;
left:170px;
top:70px;
z-index:2;
border:2px dashed #ffffff;
}
.menu4{
color:#32cd32;
width:70px;
height:80px;
background:#556b2f;
position:absolute;
left:180px;
top:73px;
z-index:0;
}
</style>
</head>
<body>
<div align="center">设计周--关于CSS position z-index的应用</div>
<span class="menu"><a href="http://www.sjzhou.cn">sjzhou.cn</a></span>
<span class="menu2"></span>
<span class="menu3"><a href="http://www.sjzhou.cn">sjzhou.cn</a></span>
<span class="menu4"></span>
</body>
</html>

[ 本帖最后由 foxion 于 2007-11-25 21:15 编辑 ]

jdz · 发表于 2007-11-27 02:36:43

:'( :'( 看不懂 HTML 还懂 CSS 指懂那么点皮毛 :$ :$