【HTML+CSS】CSS四种定位的总结：Static、Relative、Absolute和Fixed

1、静态定位Static：

      解析：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

      理解：一般的元素的定位都是静态定位。   

 

2、相对定位Relative：

      解析：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

      理解：使用相对定位Relative进行定位时，原本该元素占据的空间位置不变，以“原本该元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。

      备注：设置为相对定位的元素框会偏移某个距离，元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

例如：

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

  

3、绝对定位Absolute：

      解析：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

      理解：使用绝对定位Absolute进行定位时，该元素脱离文档流，以“父级元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。原本空间占据的位置将被关闭。

      备注：绝对定位的元素的位置相对于“最近的已定位祖先元素”，如果元素没有已定位的祖先元素，那么它的位置相对于“最初的包含块”。

例如：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

 

  4、固定定位fixed：

        解析：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

        理解：生成绝对定位的元素，相对于浏览器窗口进行定位。其它特性同Absolute绝对定位。

 

  5、其他属性：

1. overflow：设置当元素的内容溢出其区域时发生的事情
2. vertical-align：设置元素的垂直对齐方式
3. z-index：设置元素的堆叠顺序，高的在前面，仅在定位元素上奏效，可取负值

  6、使用技巧：

    1）当父级div是fixed固定布局时，要想内部元素保持位置不变，及内部元素设置absolute，那么可以在两者中间再加一层div，让其生成relative布局，即fixed-relative-absolute布局，可以实现内部元素固定位置。