0
点赞
收藏
分享

微信扫一扫

css定位

香小蕉 2021-09-30 阅读 88

css布局是在平面内的,而定位是垂直于屏幕的。
z-index:1/2/3>定位元素>文字>浮动元素>块级子元素>border>background>z-index:-1/-2/-3(判断标准,让他们相交,看看谁在谁上面)

position

  1. relative
    做absolute之父,可配合z-index(默认值为auto,auto算出来是0,但是auto和z-index:0不同。值越高在越上)
    经验:
  • z-index写的时候一般不会写999这样很大的数字,直接123排序就好了。
  1. absolute
    脱离某层文档流,找父级元素中第一个有定位的元素(position不是static的就是有定位的元素)作为参考者。
  2. fixed
    这个会固定在页面中,上下拖动你的页面都不变,微博里面回到顶部的就是这么用的。
    (一般手机上不用fixed,bug太多)
  3. sticky
    用于面试装备,平时不用的。
    没出页面的时候是正常的relative,出了就fixed在顶端。

层叠上下文

如何创建:

  1. HTML本身就是一个层叠上下文。
  2. z-index 非auto且position为r/a
  3. opacity(半透明度)<1
  4. transform不是none
  5. position:fixed无论z-index是不是auto都可。
  6. 其父元素z-index 非auto

含义

代表创建了一个小世界,只有同一个小世界的z-index才能互相比较,如果一个a,他的z-index为1,b为2,a中子元素a1,z-index为5,b中子元素b1为2,此时仍是b1在a1上面,因为只有a,b能进行比较(都在html这个小世界里面)

负index与层叠上下文

如果有负index,他依旧逃不出层叠上下文这个世界,且一定会在background上面。(记住这一个变态情况就好了。)

举报

相关推荐

0 条评论