一、定位模式
选择器{position:属性值}
1、static : 静态定位 (默认的定位方式)
2、relative : 相对定位,相对于其原文档流的位置进行定位。
3、absolute : 绝对定位,相对于其上一个已经定位的父元素进行定位。
4、fixed : 固定定位,相对于浏览器窗口进行定位。
二、位偏移
用于精确定位元素的具体位置
top、bottom、left、right
三、定位模式详解
1、静态定位 state
(1)静态定位是元素的默认定位方式
(2)任何元素在默认状态下都会以静态定位来确定自己的位置,所以当没有定义position属性的时候,并不说明没有自己的位置,它会遵循默认值显示为静态位置。
(3)在静态定位状态下,无法通过位偏移属性来改变元素的位置
2、相对定位 relative
(1)相对定位是将元素相对于它自己在标准文档流中的位置进行定位
(2)对元素进行相对定位后,可以通过位偏移属性改变元素的位置,但它在文档流中的位置仍然保
3、绝对定位 absolute
(1)绝对定位是将元素根据最近已经定位的父元素进行定位。
(2)如果所有的父元素都没有定位,则依据body根元素(浏览器窗口)进行定位。
(3)绝对定位的元素将脱离标准文档流的控制,不在占据标准文档流中的空间。
来一个小案例,看看效果
<style>
.father{
width:300px;
height:300px;
background:#CCC;
padding:10px;
}
.child01,.child02,.child03{
width:100px;
height:50px;
line-height:50px;
border:1px soild #000;
background:#999;
text-align:center;
margin:10px 0px;
}
</style>
<body>
<div class="father">
<div class="child01">child01</div>
<div class="child02">child02</div>
<div class="child03">child03</div>
</div>
</body>
运行结果:
下边对child02进行相对定位,从下图可以看出,相对定位是相对于自身的默认位置进行偏移,但其在文档流中的位置仍然保留。
.child02{
position:relative;
left:150px;
top:100px;
}
在做一个绝对定位的看一看
在网页中,一般需要子元素相对于其直接父元素的位置保持不变,即子元素依据其直接父元素绝对定位,但如果直接父元素不需要定位,怎么办?
可将直接父元素设置为相对定位,但是不对其设置偏移量。
.father{
width:300px;
height:300px;
background:#CCC;
padding:10px;
position:relative;
}
.child02{
position:absolute;
left:150px;
top:100px;
}
运行截图
注意:
1.如果仅设置绝对定位,不设置偏移量,则元素的位置不变,但其不再占用标准文档流中的空间,与上移的后续元素重叠。