[note] CSS 定位position|z-index

内容概述

一. CSS属性 - position

  • CSS属性 - position
    • static:静态定位
    • relative:相对定位
      • 图片居中
    • absolute:绝对定位
      • 图片案例
      • 二维码案例
    • fixed:固定定位

标准流 normal flow

  • 默认情况下,元素都是按照normal flow(标准流、常规流、正常流、文档流document flow)进行排布
    • 从左到右、从上到下按顺序摆放好
    • 默认情况下,互相之间不存在层叠现象
  • margin、padding定位
    • 在标准流中,可以使用margin、padding对元素进行定位
      • 其中margin还可以设置负数
    • 比较明显的缺点是
      • 设置一个元素的margin或者padding,通常会影响到标准流中其他元素的定位效果
      • 不便于实现元素层叠的效果

position: static 静态定位(position属性的默认值)

  • 按照normal flow布局
  • left 、right、top、bottom没有任何作用

position: relative 相对定位

  • 元素按照normal flow布局
  • 可以通过left、right、top、bottom进行定位
    • 定位参照对象是元素自己原来的位置
  • 相对定位的应用场景
    • 在不影响其他元素位置的前提下,对当前元素位置进行微调
  • 图片居中

position: absolute 绝对定位(脱标)

  • 元素脱离normal flow(脱离标准流、脱标)

    可以通过left、right、top、bottom进行定位
    定位参照对象是最邻近的定位祖先元素
    如果找不到这样的祖先元素,参照对象是视口

    定位元素(positioned element)
    position值不为static的元素
    也就是position值为relative、absolute、fixed的元素

绝对定位技巧【疑难】

  • 绝对定位元素(absolutely positioned element)
    • position值为absolute或者fixed的元素
  • 对于绝对定位元素来说
    • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
    • 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
  • 如果希望绝对定位元素的宽高和定位参照对象一样,可以给绝对定位元素设置以下属性
    • left: 0、right: 0、top: 0、bottom: 0、margin:0
  • 如果希望绝对定位元素在定位参照对象中居中显示,可以给绝对定位元素设置以下属性
    • left: 0、right: 0、top: 0、bottom: 0、margin: auto
    • 另外,还得设置具体的宽高值(宽高小于定位参照对象的宽高)
  • 绝对定位就像贴纸,需要就往上贴:
    • 图片案例
    • 二维码案例

position: fixed 固定定位(脱标)

  • 元素脱离normal flow(脱离标准流、脱标)
  • 可以通过left、right、top、bottom进行定位
    • 定位参照对象是视口(viewport)
    • 视口(Viewport)
      • 文档的可视区域
      • 如右图红框所示
  • 当画布滚动时,固定不动
  • 侧边栏

脱离标准流(脱标)

  • 可以随意设置宽高(都变成块级元素)
  • 宽高默认由内容决定(包裹内容)
  • 不再受标准流的约束
  • 不再给父元素汇报宽高数据

二. CSS属性 - z-index

  • 不设置的话,初始值为auto

  • z-index属性用来设置定位元素的层叠顺序(仅对定位元素有效)

    • 取值可以是正整数、负整数、0
  • 比较原则

    • 如果是兄弟关系
      • z-index越大,层叠在越上面
      • z-index相等,写在后面的那个元素层叠在上面
    • 如果不是兄弟关系
      • 各自从元素自己以及祖先元素中,找出最邻近的2个定位元素进行比较
      • 而且这2个定位元素必须有设置z-index的具体数值

作业

1.四个案例

  • 图片居中
  • 侧边栏
  • 商品大图, 有6个a的案例
  • 二维码案例

2.考拉导航的个人中心的下拉

3.预习浮动

绝对路径

相对路径:

脱离标准流的元素: position: fixed/absolute, float

和display有什么关系?

display: block/inline/inline-block

img/iframe

提问

box-sizing的两个值:

  • content-box
    • width: 只是设置content的大小
  • border-box
    • width: 设置border+padding+content

background的相关属性:

  • background-color
  • image
  • size
  • position
  • attachment
  • repeat
  • background