CSS-定位详解

Rsquo
377 阅读4分钟

1. 对标准流的理解

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

    • 从左到右、从上到下按顺序摆放好

    • 默认情况下，互相之间不存在层叠现象

  • 在标准流中，可以使用margin、padding对元素进行定位，比较明显的缺点是：

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

    • 不便于实现元素层叠的效果

2. 元素的定位

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

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

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

    • 默认值:

      • static：默认值, 静态定位

    • 使用下面的值, 可以让元素变成 定位元素(positioned element)

      • relative：相对定位
      • absolute：绝对定位
      • fixed：固定定位
      • sticky：粘性定位

3. 相对定位

  • 元素按照normal flow布局

  • 可以通过left、right、top、bottom进行定位

    • 定位参照对象是元素自己原来的位置

  • left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示

    image.png

  • 相对定位的应用场景

    • 在不影响其他元素位置的前提下，对当前元素位置进行微调

  • relative

    • 相对自己原来的位置(标准流中的位置)
    • left/right/top/bottom

  • img居中显示(了解)

    .box img {
  position: relative;
  /* left: 图片的一半 */
  left: -960px;
  /* translate中的百分比是相对于自己 */
  /* transform: translate(-50%); */

  /* 向右边移动div的一般 */
  margin-left: 50%;
}

4. 固定定位

  • 元素脱离normal flow（脱离标准流、脱标）

    • 可以通过left、right、top、bottom进行定位

    • 定位参照对象是视口（viewport）

    • 当画布滚动时，固定不动

  • fixed

    • 相对视口(可视区域viewport)
    • 不会随着内容的滚动而滚动

image.png

5. 绝对定位

  1. 元素脱离normal flow（脱离标准流、脱标）
  • 可以通过left、right、top、bottom进行定位
  1. 相对的参照对象

  • 定位参照对象是最邻近的定位祖先元素（position值不为static的元素）

  • 如果找不到这样的祖先元素，参照对象是视口

  1. 子绝父相

  • 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：

    • 父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
    • 子元素设置position: absolute
    • 简称为“子绝父相”
  • 子元素绝对定位
  • 父元素相对定位
  1. 子绝父绝
  • 子元素绝对定位
  • 父元素绝对定位
  1. 子绝父固
  • 子元素绝对定位
  • 父元素固定定位

6. position设置absolute/fixed特性

  1. 都是脱离标准流

    • 不再严格按照从上到下、从左到右排布

    • 不再严格区分 块级(block)、行内级(inline)，行内块级(inline-block) 的很多特性都会消失

  2. 可以任意设置宽度和高度

  3. 宽高默认由内容决定

  4. 不再给父级元素汇报宽度和高度

  5. 自己内部依然按照标准流布局

  6. 对于绝对定位元素参照对象的宽高

    • 定位参照对象的宽度 = 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

  • 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）

7. 粘性定位 sticky

  • 可以看做是相对定位和固定(绝对)定位的结合体

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

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

sticky是相对于最近的滚动祖先包含滚动视口的(the nearest ancestor scroll container’s scrollport )

8. position多个值总结

image.png

9. z-index

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

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

z-index.png

  • 比较原则

    • 如果是兄弟关系

      ✓ z-index越大，层叠在越上面

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

    • 如果不是兄弟关系

      ✓ 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较

      ✓ 而且这2个定位元素必须有设置z-index的具体数值

10. auto到底是什么?

  • 800 = 200 + ml0 + mr0 + 0 + 0

  • auto -> 交给浏览器处理

  • width: auto;

    • 行内非替换元素 -> width: 包裹内容

    • 块级元素 ->width: 包含块的宽度

    • 绝对定位元素 -> width: 包裹内容

avatar
文章
阅读
粉丝