Jesho Ng Docs

Appearance

定位 ​

1、标准流 ​

默认情况下，元素都是按照 normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布

  • 从左到右、从上到下按顺序摆放好
  • 默认情况下，互相之间不存在层叠现象

image-20240201224008940

margin-padding 位置调整 ​

在标准流中，可以使用margin、padding对元素进行定位

  • 其中 margin 还可以设置负数

比较明显的缺点是

  • 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
  • 不便于实现元素层叠的效果

2、元素定位 ​

定位允许从正常的文档流布局中取出元素，并使它们具有不同的行为:

  • 例如放在另一个元素的上面;
  • 或者始终保持在浏览器视窗内的同一位置;

position 属性

利用 position 可以对元素进行定位，常用取值有 5 个:

static | relative | absolute | sticky | fixed

static：默认值, 静态定位 ​

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

relative：相对定位 ​

  • 元素按照 normal flow 布局
  • 可以通过 left、right、top、bottom 进行定位(定位参照对象是元素自己原来的位置)

image-20240201224337067

absolute：绝对定位 ​

  • 元素脱离 normal flow（脱离标准流、脱标）
  • 可以通过 left、right、top、bottom 进行定位
    • 定位参照对象是最邻近的定位祖先元素
    • 如果找不到这样的祖先元素，参照对象是视口

fixed：固定定位 ​

  • 元素脱离 normal flow（脱离标准流、脱标）
  • 可以通过 left、right、top、bottom 进行定位(定位参照对象是视口（viewport）)
  • 当画布滚动时，固定不动

sticky：粘性定位 ​

是相对定位和固定(绝对)定位的结合体;

它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;

当达到这个阈值点时, 就会变成固定(绝对)定位;

将 position 设置为 absolute/fixed 元素的特点:

  • 可以随意设置宽高

  • 宽高默认由内容决定

  • 不再受标准流的约束

    • 不再严格按照从上到下、从左到右排布
    • 不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)的很多特性都会消失

  • 不再给父元素汇报宽高数据

  • 脱标元素内部默认还是按照标准流布局

3、 z-index ​

设置定位元素的层叠顺序（仅对定位元素有效）

  • 取值可以是正整数、负整数、0

比较原则：

  • 如果是兄弟关系

    • z-index 越大，层叠在越上面
    • z-index 相等，写在后面的那个元素层叠在上面

  • 如果不是兄弟关系

    • 各自从元素自己以及祖先元素中，找出最邻近的 2 个定位元素进行比较
    • 而且这 2 个定位元素必须有设置 z-index 的具体数值

image-20240201224608820