37216年前
<html>
<head>
<meta charset="utf-8">
<title>相对定位与绝对定位</title>
<style type="text/css">
*{padding:0px;margin:0px;}
body{color:#fff;}
.a1{width:150px;height:150px;background:red;position:relative;left:300px;}/*设置宽高，背景红色，相对定位：距离原始位置左侧300，也就是右移300，下面直接说相对原位置右移*/
.a2{width:150px;height:150px;background:green;position:absolute;top:33px;left:330px;}/*设置宽高，背景绿色，绝对定位（由于没有已经定位的父元素，所以这个绝对定位是相对于body）：下移33，右移330，所以显示覆盖在第一个上面*/
.a3{width:150px;height:150px;background:blue;}/*设置宽高，背景蓝色，无定位*/
.a4{width:150px;height:150px;background:black;position:relative;top:50px;left:50px;}/*设置宽高，背景黑色，相对定位：下移50，右移50*/
.a5{width:80px;height:80px;background:yellow;color:green;position:absolute;left:10px;top:10px;}/*设置宽高，比其他几个都小，背景黄色，字体颜色绿色，绝对定位：（由于其父元素a4已经相对定位，所以a5的绝对定位就成了相对于a4的定位）右移10，下移10*/
.a6{position:absolute;right:20px;color:black;width:80px;height:30px;background:#ccc;line-height:30px;text-align:center;}/*绝对定位：（由于没有已经定位的父元素，所以a6的绝对定位是相对于body）距离右边20，字体颜色黑色，设置宽高（其本身是个span行内元素，原本设置行高不起作用，但是它已经绝对定位，所以就变成了块级元素），背景色ccc，line-height与height一样，即垂直居中，文字水平居中*/
</style>
</head>
<body>
<div class="a1">第一个</div>
<div class="a2">第二个</div>
<div class="a3">第三个</div>
<div class="a4">
<div class="a5">第五个</div>
</div>
<span class="a6">导航条</span>
</body>
</html>
0
