position:absolute/relative/fixed小结

Posted Silence

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了position:absolute/relative/fixed小结相关的知识,希望对你有一定的参考价值。

1、绝对定位:position:absolute;

  当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是0,那么它将漂浮在原来的位置上,否则,会根据相对该元素外的第一个非static属性的元素进行定位,如果没有非static属性的父元素,则相对于body定位。当偏移后超出浏览器视线的向下或向右的内容不会被隐藏,而是会出现滚动条,但是向左或向上的内容超出后会被隐藏。

2、相对定位:position:relative;

   当设置了相对的偏移量后,这个div原来所占据的位置(文档流)不会被后面的文档流填补,而是空在那里。当偏移后所有超出浏览器视线的内容会被隐藏。

3、position:fixed;固定定位

  设置后,元素脱离文档流,可以使层级固定不动。

4、absolute/relative/fixed三者区别:

  ①相对定位relative不会失去文档流的位置,而绝对定位absolute会失去原来在文档流中的位置,被后面的内容所取代。

  ②无论是相对定位relative、固定定位fixed还是绝对定位absolute,当偏移量内容超出上面、左边浏览器窗体(即可视区域)的时候,超出内容都会被隐藏;但是当偏移量内容超出右边、下面窗体的时候,相对定位relative会隐藏超出部分,而固定定位fixed、绝对定位absolute会出现滚动条。

  ③相对定位relative、固定定位fixed和绝对定位absolute都会脱离正常文档流,浮动在正常文档流的上面,如果遮盖了正常文档流,可以通过设置z-index来解决。

5、absolute/relative/fixed实际应用

①position的值为absolute或fixed可以创建一个BFC

  BFC:块级格式化上下文,把浮动的元素框起来,浮动不会溢出,相当于页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素。

  BFC作用: a.清除浮动

        b.防止margin折叠

        c.左右两栏布局

②position:fixed  能够使层固定不动,比如使导航栏不会随页面滚动而滚动。

③绝对定位里这些值可以不指定,能够自动计算:top/left/right/bottom/width/height ,如果冲突了,以width和height为准。处理冲突也是可以进行一些利用,比如居中。

以上是关于position:absolute/relative/fixed小结的主要内容,如果未能解决你的问题,请参考以下文章