CSS定位、层叠效果和浮动_04

一、CSS定位

1、绝对定位

• 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。
• 使用绝对定位需要将HTML元素的position属性值设置为absolute（绝对的），并使用四种关于方位的属性关键词left、right、top、bottom中的部分内容设置元素位置。一般来说从水平和垂直方向各选一个关键词即可。
• 绝对定位的声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页

2、相对定位

• 使用相对定位需要将HTML元素的position属性值设置为relative（相对的），并使用四种关于方位的属性关键词left、right、top、bottom中的部分内容设置元素位置。一般来说从水平和垂直方向各选一个关键词即可。
• 相对定位的位置是相对于元素自身的正常初始位置而言的。因此，即使是内容完全一样的相对定位代码作用于初始位置不同的多个元素上也仅能保证位移的方向一致，并不能代表这些元素最终将出现在相同的位置上。

3、层叠效果
在CSS中，除了定义在HTML元素在水平和垂直方向上的位置，还可以定义多个元素在一起叠放的层次。使用属性z-index可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位置。

4、浮动

1. 浮动效果float
   在CSS中float属性可以用于令元素向左或向右浮动。该属性有四种属性值：
   left：向左浮动；
   right：向右浮动&#x