css定位,position属性详解:css相对定位,css绝对定位
2017-01-09 22:37

什么是CSS定位?

css定位是css布局中,用来设置一个元素在文档中的展示规则。css定位由一个css属性:position来设置。position属性指定一个元素按照什么方式计算在web页面中的位置。

position的属性值:

position:static,

position:relative,

position:absolute,
position:fixed

这些个属性值,规定了设置position属性的元素在页面中的位置计算方式。

web页面的元素展示称为文档流,在文档流中的元素会随着上下文元素计算展现的位置,不在文档流中元素会相对于某一个参照物来计算其展现的位置。

这个就好比战场上的陆军和空军,陆军的将士只能是一个个排队往前中,有前后顺序的,这就是文档流,而脱离文档流的元素就像空军的飞机,各个飞机飞行的高度不一样,他们的所在的位置不受陆军的影响,可以随便跑。

下面我们一个个来看看这些css定位属性各自的意义。

1,position:static

position:static是dom元素的默认布局方式,会随着文档流逐个排列。对于他们,top,bottom,left,right,z-Index这些个属性是不会起任何作用的。

2,position:absolute

position:absolute指定一个元素脱离文档流,成为空军,文档流中的陆军不用给他们留位置。absolute定位使用top,bottom,left,right来规定一个飞机的位置。z-Index设置飞机飞行的高度,z-Index越大飞的越高。

<div class="abs"></div>
.abs{
    position:absolute;
    z-Index:2;
    left:100px;
    top:100px;
    background:darkcyan;
    width:200px;
    height:200px;
 }

效果如下:

abs.png

left,top值规定了这个深蓝色的飞机距离天空的左上角横着200px,竖着200px。

absolute定位的元素的计算是相对于距离他最近的非static定位的父元素左上角计算的,如果没有非static定位的父元素,则相对于body进行定位。

我们来通过position:absolute的嵌套来看一下这架飞机的位置是相对哪里计算。

.abs{
    position:absolute;
    z-Index:2;
    left:100px;
    top:100px;
    background:darkcyan;
    width:200px;
    height:200px;
}
.minabs{
    position:absolute;
    z-Index:2;
    left:20px;
    top:20px;
    background:darkorange;
    width:150px;
    height:150px;
}
.rel{
    position:relative;
    left:20px;
    top:20px;
    width:100px;
    height:100px;
    border:1px solid darkgoldenrod;
}
.mixabs{
    position:absolute;
    z-index: 2;
    left:20px;
    top:20px;
    height:20px;
    width:60px;
    height:60px;
    background: deeppink;
}
<div class="abs">
    <div class="minabs">
        <div class="rel">
            <div class="mixabs"></div>
        </div>
    </div>
</div>

效果如下:

absrel.png

abs这架大飞机还是相对于body定位的,

minabs这架小飞机是相对于abs这架飞机定位,他在打飞机内部。

rel是relative,在minabs小飞机内部又开辟了一片天空,

mixabs这架小小飞机就相对于rel这片天空进行定位。

absolute定位由一个特性,他不会出现margin值合并的现象。

<div class='ft'>...</div>
<div class='sc'>...</div>
.ft{margin-bottom:20px;}
.sc{margin-top:20px;}

如果两个元素不是abosulte定位,两个div间的距离是20px,两个div间的margin值会合并取其大者,这就是margin合并。

如果两个元素是absolute定位,两个div间的距离是40px。

3,position:relative

absolute就做绝对定位,relative叫做相对定位,这个相对定位由两层含义,一是上面说的给absolute定位的元素提供一片相对计算的天空,二是它本身可以相对自己进行位移,并且不会改变文档流的布局。

position:relative对于table中元素是不起作用的。不要在table元素上使用relative定位。

.mrel{
    position:relative;
    display: inline-block;
    background: darksalmon;
    padding:0 6px;
    margin:0 6px;
}
<div class="cont">
    mooshine
    <span class="mrel">relative</span>
    前端
</div>

效果如下:

rel.png

然后我们给relative的元素,添加left便宜。

.mrel{
    position:relative;
    display:inline-block;
    background: darksalmon;
    padding:0 6px;
    left:-20px;
}
<div class="cont">
    mooshine
    <span class="mrel">relative</span>
    前端
</div>

效果如下:

relleft.png

添加了left便宜后,relative元素向左便宜了20px,并且他原来的空间没有被侵占,他后面的元素还在他原来的位置。

relative的定位可以应用与block,inline-block,inline元素上。

但是absolute定位的元素会初始化成block元素。即使你给他设置inline特性也不起作用。

4,position:fixed定位

fixed定位跟absolute定位特性相似,只有一点不同,fixed定位的元素都是相对于浏览器窗口进行计算定位的。我们把上文absolute示例中的代码改为fixed定位,结果就会变成下面这样:

fixed.png

fixed定位使所有元素的left,top值都相对于浏览器窗口进行计算。


position定位结语

在页面动画实现中用absolute,relative,fixed定位能起到页面优化的作用,因为他减少了浏览器的回流操作,只是一个重绘操作。fixed定位现在也可以放心使用了,fixed定位在IE7上都是兼容的。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2565)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1