position的几种定位

2018-01-24  本文已影响0人  海娩

在css中,经常会出现的问题就是你书写的属性值得不到你想要的效果,一方面是由于优先级的原因,在其他标签中已经把你想设置的属性覆盖了,另一方面可以考虑的问题是定位的问题,也就是接下来要说的position

- static 静态定位

默认来说,如果你在一个标签中没有设置css标签的position属性,默认值是static,这时候的left,right,top,z-index这些属性就会被忽略

- absolute 绝对定位

生成绝对定位的元素,脱离文档流,当设置这个属性时,我们可以设置该盒相对于其父元素的偏移量。并且,由于脱离常规流,绝对定位不会影响其兄弟元素的布局。。由此,在设置css的时候,当一个元素被其兄弟元素挡到的时候,我们可以猜测是不是各个兄弟元素都设置了绝对定位。另外,绝对定位的外边距不会跟其他盒合并,这跟BFC生成有关。

- fixed固定定位

跟absolute一样,盒的外边距不会跟其他外边距合并。相对于视口固定

- relative 相对定位

这个我之前一直跟absolute搞混。position设置为relative之后,盒的位置是根据常规流来计算的。是相对于原本的自身的偏移量。参照物是原本的自己。而absolute的参照物是他的包含块即他的父级元素。当盒B为相对定位时,后面盒的位置仍按照B没有偏移来计算的,因此也有可能会有重叠的情况出现

- inherit 继承定位

emmmm,就是继承父元素的定位方式,但是,一般来说会比较少用,也不推荐使用,因为无法预知父元素的改变,可能会造成较大的变动,同时,也不方便于项目代码的可阅读性。

上一篇下一篇

猜你喜欢

热点阅读