CSS position 属性 static relative absolute fixed 都是什么概念?尤其是fixed。。。。

发布网友

我来回答

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中有详细资料

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com