position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。
position的四种属性
- static
无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。
- relative
对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置,关键点是它原本的空间仍然保留。
//HTML//CSS
div{
width:200px;
height:100px;
background:pink;
border:1px solid;
}
.relative{
position:relative;
top:20px;
left:20px;
background:lightgreen
}
文章图片
【详解position属性】相对定位相对的是它原本在文档流中的位置而进行的偏移,并且原本的空间也占据着,下面的元素并不会顶替上去
- absolute
//HTML//CSS
div{
width:200px;
height:100px;
background:pink;
}
.absolute{
position:absolute;
width:100px;
height:100px;
background:lightgreen;
top:50px;
left:20px;
}
文章图片
注意:
relative和static方式在最外层时是以标签为定位原点的,而absoulte方式在无父级是position非static定位时是以作为原点定位。和元素相差9px左右。
//HTML//CSS
.relative{
position:relative;
width:100px;
height:100px;
border:1px solid pink;
}.absolute{
position:absolute;
width:100px;
height:100px;
border:1px solid lightgreen;
top:0px;
}
文章图片
看了上面的代码后,细心的朋友肯定要问了,为什么absoulte定位要加 top:0; 属性,这是不是多此一举呢?
其实加上这个属性是完全必要的,因为我们如果使用absoulte或fixed定位的话,必须指定 left、right、 top、 bottom 属性中的至少一个,否则left/right/top/bottom属性会使用它们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递,简单讲就是都变成relative,会占用文档空间,这点非常重要,很多人使用absolute定位后发现没有脱离文档流就是这个原因,这里要特别注意~~~
- fixed
fixed定位,又称为固定定位,它和absoult定位一样,都脱离了文档流,并且能够根据top、right、left、bottom属性进行定位,但不同的是fixed是根据窗口为原点进行偏移定位的,也就是说它不会根据滚动条的滚动而进行偏移。
.nav{
position:fixed;
top:0;
z-index: 999;
}
给导航栏加上如上css就可以使导航栏固定在顶端。
参考资料:http://luopq.com/2015/11/15/css-position/