position 属性有 4个值
static 、 relative 、 absolute 、fixed ，默认值为 static 。只有将元素的 position 属性设定为relative 、 absolute 或 fixed ，元素的 top 、 right 、 bottom 和 left 属性才会起作用。
1、 静态定位static
在静态定位的情况下，每个元素在处在常规文档流中。它们都是块级元素，所以就会在页面中自上而下地堆叠起来。
2、相对定位relative
相对的是它原来在文档流中的位置（或者默认位置），使用 top 、 right 、bottom 和 left 属性来改变它的位置，但多数情况下，只用 top 和 left 就可以实现我们想要的效果。元素自己相对于原始位置挪动了一下之外，页面没有发生任何变化。换句话说，这个元素原来占据的空间没有动，其他
元素也没动。
{
position:relative; top:25px; left:30px;
}
3、绝对定位absolute
绝对定位会把元素彻底从文档流中拿出来。绝对定位的元素完全脱离了常规文档流，它现在是相对于顶级元素 body 在定位。绝对定位元素默认的定位上下文是 body 元素。所以在页面滚动的时候，为了维护与 body元素的相对位置关系，它也会相应地移动。
{
position:absolute; top:25px; left:30px;
}
4、固定定位fixed
从完全移出文档流的角度说，固定定位与绝对定位类似。但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。固定定位并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素。
{
position:fixed; top:30px; left:20px;
}
5、定位上下文
把元素的 position 属性设定为 relative 、 absolute 或 fixed 后，继而可以使用 top 、right 、 bottom 和 left 属性，相对于另一个元素移动该元素的位置。这里的“另一个元素”，就是该元素的定位上下文。
绝对定位元素默认的定位上下文是 body 。这是因为body 是标记中所有元素唯一的祖先元素。而实际上，绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要你把相应祖先元素的 position 设定为 relative 即可。
- html
<body>
<div id="outer">
<div id="inner">This is text...</div>
</div>
</body>
- css
div#outer {
position:relative;
width:250px;
margin:50px 40px;
border-top:3px solid red;
}
div#inner {
position:absolute;
tetop:10px;
left:20px;
background:#ccc;
}
网友评论