相信看过我前面写过的三篇文档,对float、盒子模型、边距有了认识,那么我接下来介绍的这个可谓在布局中起到一个重要的作用,它就是"定位”。
定位的作用:定位可以让元素摆放在你想要摆放的位置。
先来看定位的模式:
在css中,position属性用于定义元素的定位模式,其基本语法格式如下,属性值的说明如图1所示:
选择器{position:static|relative|fixed|absolute|inherit}
其次是元素的定位属性(边偏移),如图2所示:
比如top:10px;left:40px等。
常用的定位是:相对定位、固定定位、绝对定位。
1.静态定位:对于边偏移无效,一般用他清除定位,它相当于标准文档流。
2.相对定位
相对定位:相对于自身原来的位置进行定位,原来的位置保持不变,没有脱离标准文档流。
如果想为元素设置相对定位,需要设置position:relative;,被设置的元素是相对于自身原来的位置进行定位。可以通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置,然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性值大小确定,偏移前的位置保持不变。比如我们想要让一个div元素相对当前位置下移50px,如图3所示。
2.绝对定位:相对于第一个父元素进行定位,常用在图标或者需要放在某个元素上面的盒子,脱离标准文档流并会发生元素模式转换(转换为行内块元素)。
如果想为元素设置绝对定位,需要设置position:absolute;,这条语句的作用将元素从文档流中脱离出来,不占用原来元素自身的空间位置,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查,直到相对于body元素,即相对于浏览器窗口,如图4所示。
从图片显示效果可以看出,给盒子2设置绝对定位后,盒子1跑到了盒子2的下面。
3.固定定位:相对于浏览器窗口进行定位,常使用固定导航,脱标并会发生元素模式转换(转换为行内块元素),此处我就不演示了,可以自己写一下。
如果想为元素设置固定定位,需要设置position:fixed;,直接以浏览器窗口作为参考进行定位,它是浮动在页面中,元素位置不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小。因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响。
通常相对定位和绝对定位配合使用:子元素使用绝对定位,最近的父元素必须使用相对定位。