position定位与float一样,也是css排版中非常重要的概念。position从字面意思可以理解就是指定块的位置,即块相对于其父块的位置和相对于它自身应该在的位置。
position属性:
static 静态(默认),无特殊定位
relative 相对 对象不可重叠
absolute 绝对,将对象从文档流中拖出
fixed 悬浮 使元素固定在屏幕的某个位置
inherit 继承
1.相对定位(relative)
如果对一个元素进行相对定位,可在它所在的位置上,通过设置垂直或水平位置,让这个元素相对于起点进行移动。如果将top设置为40像素,那么框出现在原位置顶部下方10像素的位置。如果将left设置为40像素,那么会在元素左边创建40像素的空间,也就是将元素向右移动。
<style>
*{margin:0;
padding:0;}
#main{
position:relative;/*相对定位*/
left:10px;
top:40px;
background-color:pink;
float:left;
height:200px;
width:200px;
}
.one{
width:300px;
height:300px;
background-color:yellowgreen;}
</style>
</head>
<body>
<div class="one">one</div>
<div id="main"> main</div>
</body>
</html>
main DIV相对于one定位
2.绝对定位(absolute)
绝对定位实际上被看做普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。与其相反,绝对定位使元素的位置与文档流无关,因此不占据空间,普通文档流中其他元素的布局就像绝对定位的元素不存在一样。简单地说,使用了绝对定位之后,对象就浮在网页上面了
上面例子改成
position:absolute;
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块
简单的来说:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
注意:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。
3.浮动定位(fixed)
生成绝对定位的元素,相对于浏览器窗口进行定位