CSS 定位

定位

• 视觉格式化模型，大体上将页面分为三种方式：

1. 常规流

2. 浮动：float

3. 定位：position

   • 定位：手动控制元素在包含块中的精确位置
   • 涉及的css属性：position

position

• 默认值：static，静态定位（不定位）

• relative：相对定位

• absolute:绝对定位

• fixed：固定定位

• 一个元素，只要position的取值不是static，认为该元素时一个定位元素

• 定位元素会脱离文档流（相对定位除外）

• 一个脱离了文档流的元素：

1. 文档流中的元素拜访时，会忽略脱离了文档流的元素
2. 文档流中元素计算自动高度时，会忽略脱离了文档流的元素

相对定位

• 不会导致元素脱离文档流，只是让元素在原来位置上进行偏移

• 可以通过四个css属性设置其位置：

  • left
  • right
  • top
  • bottom

• 盒子的偏移不会对其他盒子造成影响

• 上下或者左右矛盾时以上左为主

绝对定位

1. 宽高为auto时，适应内容
2. 包含块变化：从父元素依此向上寻找至第一个定位元素，该元素的填充盒为其包含块。若找不到，则整个网页就是它的包含块（初始化包含块）（填充盒为内容加padding）

固定定位

• 其他情况盒绝对定位完全一样
• 包含块不同：固定为视口，可视窗口

定位下的居中

• 某个方向居中：

1. 定高（宽）
2. 将左右（上下）设置为0
3. 将左右（上下）margin设置为auto
   • 绝对定位和固定定位中margin为auto时，会自动吸收剩余空间
   • Eg：
   • left：0;
   • right:0;
   • top:0;
   • bottom:0;
   • margin:auto;

多个定位元素重叠时

• 堆叠上下文
• 设置z-index，通常情况下，该值越大越靠近用户
• 只有定位元素设置z-index有效

补充

• 绝对定位，固定定位元素一定是块盒
• 绝对定位、固定定位元素一定不是浮动
• 没有外边距合并
• 绝对定位、固定定位元素要设置宽度