position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。
position的四种属性
-
static
无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 -
relative
对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置，关键点是它原本的空间仍然保留。
//HTML
<div class="relative"></div>
<div></div>
//CSS
div{
width:200px;
height:100px;
background:pink;
border:1px solid;
}
.relative{
position:relative;
top:20px;
left:20px;
background:lightgreen
}
相对定位相对的是它原本在文档流中的位置而进行的偏移,并且原本的空间也占据着，下面的元素并不会顶替上去
- absolute
元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了。看下面例子：
//HTML
<span class="absolute"></span>
<div></div>
//CSS
div{
width:200px;
height:100px;
background:pink;
}
.absolute{
position:absolute;
width:100px;
height:100px;
background:lightgreen;
top:50px;
left:20px;
}
注意：
relative和static方式在最外层时是以<body>标签为定位原点的，而absoulte方式在无父级是position非static定位时是以<html>作为原点定位。<html>和<body>元素相差9px左右。
// HTML
<div class="relative"></div>
<div class="absolute"></div>
//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就可以使导航栏固定在顶端。
网友评论