文章目录

• 基本概念
• • • 1.定位的类型
    • 2.容纳块
    • 3.偏移属性
• 宽度和高度
• • • 1.限制宽度和高度
• 内容溢出和裁剪
• • • 1.溢出
• 元素可见性
• • • 1.visiblity：hidden与display：none的区别
• 绝对定位
• • • 1.绝对定位元素的容纳块
    • 2.Z轴上的位置

基本概念

1.定位的类型

position

取值： static | relative | sticky | absolute | fixed

初始值：static

适用于： 所有元素

• static：正常生成元素框。
• relative：元素框偏移一定距离。元素的形状与未定位时意义的意义一样
• absolute：元素框完全从文档流中移除，相对容纳块定位。不论什么类型的元素都生成块级元素框。
• fixed：元素框的行为类似于absolute，不过容纳块是视区自身。
• sticky：元素一开始留在常规的文档流中，达到触发粘滞的条件时，从常规的文档流中移除，不过在常规文档流中占据的空间得以保留。此时，相对于相对容纳块绝对定位。触发粘滞的条件失效后，元素回到常规文档流中最初的位置。

2.容纳块

通常指包含另一个元素的框体。对于非根元素来说：

• 如果position属性的值是relative或static，其容纳块由最近的块级、单元格或行内块级祖辈元素框体的内容边界划定。

• 如果position的属性是absolute，其容纳块是position属性的值不是static的最近的祖辈元素：

  • 如果祖辈元素是块级元素，容纳块是哪个元素的内边距边界，即由边框限定的区域。
  • 如果祖辈元素是行内元素，容纳块是祖辈元素的内容边界。
  • 如果没有祖辈元素，元素的容纳块是初始容纳块

3.偏移属性

top，right，bottom，left

初始值：auto

适用于：定位元素

宽度和高度

width，height

初始值：auto

适用于：块级元素

1.限制宽度和高度

min-width，min-heigth，max-width，max-height

初始值：0（min），none（max）

内容溢出和裁剪

1.溢出

overflow

取值：visible | hidden | scroll | auto

初始值：visible

适用于：块级元素和置换元素

元素可见性

visibility

取值：visible | hidden | collapse

初始值：visible

适用于：所有元素

1.visiblity：hidden与display：none的区别

后者会导致元素不显示，完全从文档中移除。因此文档的布局不会再有任何影响。但是前者在不可见你的情况下，元素仍像可见时那样影响文档的布局。

绝对定位

1.绝对定位元素的容纳块

绝对定位的元素完全从文档流中移除，其位置相对容纳块确定，外边距的边界使用偏移属性划定。绝对定位的元素不围绕其他元素的内容流动，而其内容也不围绕定位元素流动。绝对定位元素的容纳块是position属性不为static的最近祖辈元素。

2.Z轴上的位置

z-index

初始值：auto

适用于：定位元素