首页 > 代码库 > div的覆盖，居中
div的覆盖，居中
<!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>
<!--div的覆盖，居中，与嵌套-->
<style type="text/css">
#apDiv1 {
position: absolute;/*div1的绝对位置*/
width:100%;/*长度为100%*/
left:0px;/*在HTML中距离左面的距离*/
top:0px;/*在HTML中距离上面的距离*/
height: 25px;/*高度*/
z-index:1;/*div的纵轴，不再同一个div中，如果后面的数字比1大，大的那个div排在页面上面*/
background-color:#F00;/*背景的颜色*/
color:#FFF;/*字体的颜色*/
}
#apDiv2 {
position: absolute;
left:0px;
top: 25px;/*在HTML中距离上边的距离，这为div1的高度*/
width: 100%;
height: 60px;
z-index: 1;
background-color:#0F0;
}
#apDiv3 {
position: absolute;
left:0px;
top: 85px;/*在HTML中距离上边的距离，这为div1和div2的高度*/
width:100%;
height: 20px;
z-index: 1;
background-color:#FF0;
}
#apDiv4 {
float:right;/*div4在div1中为靠右对齐*/
height:19px;/*div4的高度*/
padding:0px;/*声明中设置所有内边距属性*/
color:#fff; /*div4的字体颜色*/
z-index:1;
margin-top:0px;
}
/*div5在div6中*/
#apDiv5 {
margin:auto;/*div5的位置居中*/
width: 980px;
height: 400px;
z-index: 1;
background-color:#000;/*div5的颜色*/
}
#apDiv6 {
position: absolute;/*div6的绝对位置*/
left: 0px;
top: 25px;
width: 100%;
height: 100%;
z-index: 2;
}
</style>
</head>
<body>
<div id="apDiv1"><a>设为首页</a>|<a>加入收藏</a> |<a>联系我们</a><div id="apDiv4">连接网址：www.baidu.com</div></div>
<div id="apDiv2">第二行</div>
<div id="apDiv3">第三行</div>
<div id="apDiv6"><div id="apDiv5"></div></div>
</body>
</html>
div的覆盖，居中