可能有点乱。
CSS position 属性
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
有四种属性:static、relative、absolute、fixed。
1.relative 元素框偏移某个距离。对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
2.absolute:将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。
元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border )。
效果显示:
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
3.fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身(不是很懂啊)。
先看个例子吧:
-
案例:定位:固定定位
本例演示如何相对于浏览器窗口来对元素进行定位。
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:100px;
right:30px; /*将距离扩大一下,方便测量*/
border-style: solid;
border-width:1px; /*为第二段代码加一个1px的边框,方便测量*/
margin:0px 0px 0px 0px; /*外边距会影响测量,全部设置成0*/
}
</style>
结果如下图:
那么absolute和fixed有什么区别呢?
同样都是固定位置,但是absolute是与页面相对固定,而fixed是与浏览器窗口相对固定。
如下代码可以拿去测试一下,(可直接放在w3school的案例里面测试):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>absolute和fixed的区别</title>
<style type="text/css">
body{color:#fff;}
#html{position:relative;width:778px; height:1000px; border:1px solid #0000FF;}
#fixed,#absolute{width:200px; height:200px; background:#FF0000;}
#fixed{position:fixed; top:50px; left:50px;} /*在这里和下面的代码中我尝试加入了 right 与 bottom,但是效果没有变化,可能是top与left的 级别高吧。*/
#absolute{position:absolute; top:50px; left:450px;}
</style>
</head>
<body>
<div id="html">
<div id="fixed">我在屏幕的位置不会改变</div>
<div id="absolute">我会随屏幕滚动</div>
</div>
</body>
</html>
4.至于最后一个,static,它是posotion的默认参数,无特殊定位,对象遵循html定位规则