• 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为准。处理冲突也是可以进行一些利用,比如居中。

    本文链接:http://www.cnblogs.com/xsilence/p/5530402.html

    我的个人博客地址:http://www.cnblogs.com/xsilence/
    欢迎转载,但希望您注明转载出处并给出原文连接
  • 相关阅读:
    描述cookies,sessionStorage和localStorage的区别
    利用Vue+ElementUi实现评论功能
    什么是盒子模型?
    个人认为比较干的博客帖子,长期维护更新
    problems_starter
    knowledge_starter
    删除某个目录下所有文件中的所有空行的最简单方法sed
    vscode快捷键备忘录
    C语言程序编译和运行,看这一篇就够了
    spring security坑1:通过code获取token报错
  • 原文地址:https://www.cnblogs.com/xsilence/p/5530402.html
Copyright © 2020-2023  润新知