CSS定位

绝对定位(position: absolute;):

1、绝对定位是脱离了文档流,不会独占一行,它的方位只会受到top,left,bottom,right的影响。

2、一个块的top,left,bottom,right 是相对于什么呢?

1)如果它父元素做了定位,就相对于的是最近的一个父元素。

2)如果父元素没有定位,就相对于Body。

以下一段话引用自张鑫旭《absolute绝对定位的非绝对定位用法》:

position为absolute的元素如果没有设置left, top等值与left:0;top:0的的效果为何不一样?相信您应该知道答案了,例如一个div中有个absolute属性元素,其没有left或是top值,其会像个普通的inline-block属性元素一样静静地呆在这个div里面,但是一旦设置了left:0;top:0对不起,这个absolute元素立马变身,直接从DOM tree里面脱离,独立于文档流,结果相对于最近的relative属性的祖先标签定位(如果没有,就body定位)。


相对定位(position: relative;):

3、相对定位没有脱离文档流,会单独占满一行,它的方位还会受到top,left,bottom,right的影响。

4、相对定位的top,left,right,bottom是相对于块的最近的一个父元素。


5、一旦脱离文档流就不能设置浮动。


固定定位(position: fixed;):

6、固定定位脱离了文档流,不会单独占满一行。

7、top,left,right,bottom 始终相对的是body。


静止定位(position:static;):

8、默认为静止定位。此种情况top,left,right,bottom 不发挥作用。



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lifewinner1992/article/details/79959901
个人分类: CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭