定位的相关属性值:relation、absolute、fixed、static(默认值)
【relation 是相对定位、absolute是绝对定位、fixed是固定定位】
其中他们设置的偏移属性为:left、right、top、bottom
(后面的偏移属性值的单位为px )
举例
首先设置三个盒子(red,gold,brown)设置不同的大小、颜色,父元素是content
- 相对定位
将第一个盒子red,设置相对定位 position:relation
.red{
position:relation;
left :100px
/*距离左边边距100px*/
}
它会相对它自身原本的位置偏移,并且会保留原来的位置,没有脱离文档流
(一般用来做细小的布局调整)
- 绝对定位
设置第二个盒子gold 绝对定位 position:absolute
【这里修改了三个盒子的大小,都为100*100,这样看的明显一些】
.gold{
position:absolute;
left :100px
/*距离左边边距100px*/
}
从图中可以看出 绝对定位会脱离文档流
这个时候绝对定位是相对整个网页,向右偏移100px
但是当祖先元素,或者父级元素 相对定位relation后,它就会相对祖先元素或者父级元素偏移
(所以一般使用绝对定位时,回搭配相对定位一起使用)
- 固定定位 position:fixed
给第三个盒子brown设置固定定位
.brown{
background-color:brown;
width:100px;
height:100px;
position: fixed;
left: 100px;
}
向右偏移100px
图中brown同样也脱离文档流 相对整个网页偏移100px
这样的特性和绝对定位一样
但是不同的是,不管父级元素还是祖先元素设没设置相对定位
它都是始终是相对整个网页偏移的
但是它会固定在视口的这个位置,无论整个网页的高度有多高,它都会始终固定在视口的这个位置
如图所示:
这种样式,常用在侧边的 回到顶部 的侧边栏导航中