发布网友
共3个回答
热心网友
CSS position:
static:默认属性,静态定位
relative:相对定位,相对于父元素的定位,需要配合top,left,right,bottom,z-index等属性
absolute:绝对定位,相对于父元素的定位,需要配合top,left,right,bottom,z-index等属性
fixed:固定定位,相对于父元素的定位,需要配合top,left,right,bottom,z-index等属性(IE6不支持)
你看一个例子就明白了。
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>CSS POSITION</title>
<style type="text/css">
.wrap{position:relative;height:800px;z-index:1;}
.ps, .pf, .pr, .pa{width:80px;height:80px;line-height:80px;text-align:center;color:#FFF;font-weight:600;font-size:18px;}
.ps{position:static;background-color:silver;}
.pf{position:fixed;background-color:green;top:50%;left:50%;}
.pr{position:relative;background-color:red;top:30px;right:-130px;z-index:10;}
.pa{position:absolute;background-color:orange;top:60px;left:60px;}
</style>
</head>
<body>
<div class="wrap">
<div class="ps">static</div>
<div class="pf">fixed</div>
<div class="pr">relative</div>
<div class="pa">absolute</div>
</div>
</body>
</html>
热心网友
static: 正常的文档排版。
relative:正常的文档排版,内部绝对的定位元素,相对自己定位。
absolute:绝对定位,相对父级链上面第一个‘非static’定位。
fixed:屏幕可视区域定位,IE6不认识。追问我设置fixed怎么没见反应啊?
热心网友
www.3cschool.com中有详细资料