布局和定位的区别?

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

浮动元素脱离文档流

概述

position 是干嘛的?

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

position属性有哪些值

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

经验

  • 如果写了 absolute,一般都得补一个 relative
  • 如果写了 absolutefixed,一定要补 topleft
  • 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 时会创建层叠上下文

opacitybackground 的区别 ?

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

总结

盒模型中的背景

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

    浮动是怎么脱离文档流的

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

    position 的五个取值

  • 重点记 relativeabsolutefixed

    z-index 的用法

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

    层叠上下文是什么

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

    z-index

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