布局和定位的区别？

布局是屏幕平面上的
定位是垂直于屏幕的

浮动元素脱离文档流

概述

position 是干嘛的？

  • position 属性规定元素的定位类型。

position属性有哪些值

  • sratic : 默认值,待在文档流中
  • relative : 相对定位，升起来，但不脱离文档流
  • absolute : 绝对定位，定位基准是祖先中最近的非 static
  • fixed: 固定定位，定位基准是 Viewport（有诈）
    • 后面出了一个属性改变了这个规则
  • sticky : 粘滞定位，当要消失时粘在可视区域边不走
    • 兼容性特别差，几乎不能用了

经验

  • 如果写了 absolute，一般都得补一个 relative
  • 如果写了 absolute或 fixed，一定要补 top和 left
  • sticky 兼容性很差

position : relative

相对定位元素的定位是相对其正常位置。 移动相对定位元素，但它原本所占空间不会改变

使用场景

  • 用于位移（很少用）

  • 用于当 absolute 元素的爸爸

    配合 z-index

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

    • auto 计算出来的值为 0，但写 auto 与写 0 是不一样的
  • z-index: 0 / 1 / 2

  • z-index: -1 / -2

    经验

  • 不要写 ~~x-index: 9999~~

  • 学会管理 z-index

position: absolute

absolute 元素的位置与文档流无关，因此不占空间 absolute 绝对定位的元素位置相对于最近的已定位父元素， 如果元素没有已定位的父元素，那么它的位置相当于

使用场景

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

  • 鼠标提示

    配合 z-index

    经验

  • absolute 是相对于祖先元素中最近的一个定位元素定位的

    • 什么是定位元素？
    • position 不是默认值 sratic 就是定位元素
  • 某些浏览器上如果不写 top / left 会位置错乱
  • 善用 left: 100%;
  • 善用 left：50%+负 margin（居中）
  • width-space：nowrap; 文字内容不准换行（以后会经常使用）

position：fixed

元素的位置相对于浏览器窗口是固定位置 即使窗口滚动它也不会移动

使用场景

  • 烦人的广告

  • 回到顶部按钮

    配合 z-index

    （层叠样式）指定元素的堆叠顺序

    经验

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

层叠上下文

1.jpg

比喻

  • 每个层叠上下文就是一个新的小世界（作用域）
  • 这个小世界里面的 z-index跟外界无关

  • 处于同一个小世界的 z-index 才能比较

    哪些不正交的属性可以创建层叠上下文

  • MDN 文档 有写

  • 需要记忆的有：
    • z-index 为 0 时
    • 处于 flex时
    • opacity不为 1，为零点几时
    • 有 transform 时会创建层叠上下文

opacity 与 background 的区别 ？

  • opacity 影响整体所有东西，这也是为什么它可以创建层叠上下文的原因，因为要包住所有东西。
  • background 背景色只影响背景色。

总结

盒模型中的背景

  • 是在 border 的外延围成的区域

    浮动是怎么脱离文档流的

  • 浮动只是比以前的 div 稍微高一层，但是比文字还是矮一层

    position 的五个取值

  • 重点记 relative、absolute、fixed

    z-index 的用法

  • z-index：默认值是 auto，0，正数，负数四种值效果不一。

    层叠上下文是什么

  • 是会把所有分层给包起来，默认的层叠上下文是 HTML 元素

    负 z-index

  • 有可能会逃不出一个元素的背景，那就是因为这个元素变成了层叠上下文。