z-index用法小结

因为美工给的图片是有重叠效果的，所以使用了这个css样式．

 

z-index定义：
名称：z-index
分类：定位
简述：设置对象的层叠顺序
概述：z-index是设置对象的层叠顺序的样式。该样式只对position属性为relative或absolute的对象有效。这里的层叠顺序也可以说是对象的“上下顺序”。

它是一组css定位元素中的一元，要配合position使用．

 

第一次很粗糙的写法：

<!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=gb2312" />
<title>z-index测试</title>
<style>
#divspace{height:20px;}
#maindiv{width:970px;margin:0 auto;background:#009900;height:85px;}
#maindiv #toolbar{float:right;width:500px;height:50px;}
#logoz{
     position:absolute;
     left:6%;
     top:1%;
     z-index:1000;
     height:auto;
    }
#div_adv{
width:985px;
margin:0 auto;
height:220px;
background:url(test.gif);
background-repeat:no-repeat;} 
</style>
</head>

<body>
<div id="divspace"></div>
<div id="logoz"><img  src="logo.gif"  border="0px;" /></div>
<div id="maindiv">
    <div id="toolbar">工具条这里</div>
</div>
<div id="div_adv"></div>
</body>
</html>

但是这样在宽屏下显示是有问题的．所以改进了．

<!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=gb2312" />
<title>z-index用法</title>
<style>
#zindex_div{position:absolute;z-index:100;width:100%; margin:0 auto;top:0px;}
#zindex_div  #uu_logo{margin: 0 auto; width:900px;text-align: left;}

#maindiv{width:970px;margin:0 auto;background:#009900;height:85px;}
#maindiv #toolbar{float:right;width:500px;height:50px;}
#div_adv{
width:985px;
margin:0 auto;
height:220px;
background:url(test.gif);
background-repeat:no-repeat;} 
</style>
</head>

<body>
<div  id="zindex_div">
    <div id="uu_logo"><img  src="logo.gif"  border="0px;" /></div>
</div>
<div id="maindiv">
    <div id="toolbar">工具条这里</div>
</div>
<div id="div_adv"></div>
</body>
</html>

 

posted @ 2015-03-08 19:51  贝壳风铃  阅读(202)  评论(0)    收藏  举报