CSS定位与层叠上下文

CSS定位与层叠上下文

1.一个div的分层

div分层.png

(图片来自饥人谷)
内联子元素的层级最高,会覆盖其余的元素,后出现的无论块级还是内联子元素都按照先后顺序覆盖,后来的元素覆盖前面的元素

2.新属性 position 定位

属性值如下:

  1. static 默认值。待在文档流里面

  2. relative 相对定位,升起来,但不脱离文档流

    • 用于做位移(很少用了)

    • 用于给absolute元素做爸爸(比较常用)父相子绝

    • 配合z-index

      • z-index: auto 默认值,不创建新层叠上下文

      • z-index: 0 / 1 / 2

      • z-index:-1 / -2

    • 尽量别写z-index: 9999这样的写法

    • 学会管理 z-index

  3. absolute绝对定位,定位基准是祖先里的非static,如果没有这样的祖先元素,那么基点就会变成整个网页的根元素 html

    • 脱离原来的位置,另起一层,比如对话框的关闭按钮

    • 配合z-index

    • 经验:

      • 很多人以为absolute是根据relative定位的,其实不是

      • 某些浏览器上如果不写top / left 会位置错乱

      • 要善用 left:100%

      • 要善用 left 50%;加负的margin

  4. fixed 固定定位,定位基点是viewport(有坑)

    • 烦人的广告

    • 回到顶部的按钮

    • 配合z-index

    • 经验

      • 手机上尽量不要用这个属性,很多坑

      • 不信手机搜索[移动端fiexd]

      • transform : scale() 会使这个属性失效

  5. sticky 粘滞定位,不好描述直接举例子

过来人经验:

  • 如果你写了absolute,一般都得补一个relative

  • 如果你写了absolute 或 fixed,一定要补top和 left

  • sticky兼容性很差,主要用于面试时的拓展

3.定位与层叠上下文

定位后的元素会自动跑到最高的层级,覆盖元素中其他的元素,默认的z-index值为0,如果是负值 ,则会跑到背景色下面去

  • 每个层叠上下文就是一个新的小世界(作用域类似)

  • 这个小世界里面的z-index跟外界无关 ,设置了非static定位的元素并且设置了z-index值的元素会形成自己的层叠上下文,后面还有其余的属性可以设置

  • 处在同一个小世界的 z-index 才能比较 如果不写默认属于根元素 html 中的层叠上下文

  • 在层叠上下文中 z-index 即使是负值也不会在背景颜色下面

那些属性可以创建层叠上下文呢?

推荐阅读更多精彩内容