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>

 

 

 

显示效果差不多,只是现在这样在宽屏下也能居中了.

你可能感兴趣的:(html,css,XHTML)