3.6 CSS定位

    CSS定位可以将HTML元素放置在页面上指定的任意地方。CSS定位的原理是把页面左上角的点定义为坐标为(0,0)的原点，然后以像素为单位将整个网页构建成一个坐标系统。其中x轴与数学坐标系方向相同，越往右数字越大；y轴与数学坐标系方向相反，越往下数字越大。本节主要介绍4种定位的方式：绝对定位、相对定位、层叠效果和浮动。联合使用这些定位方式，可以创建更为复杂和准确的布局。

3.6.1 绝对定位

    绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。

    使用绝对定位需要将HTML元素的position属性值设置为absolute（绝对的），并使用4种关于方位的属性关键词left（左边）、right（右边）、top（顶部）、bottom（底端）中的部分内容设置元素的位置。一般来说从水平和垂直方向各选一个关键词即可。

例如，需要将段落元素<p>放置在距离页面顶端150像素、左边100像素的位置：

p{
position: absolute;
top:100px;
left:100px
}

需要注意的是，绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页。

3.6.2 相对定位

    使用相对定位需要将HTML元素的position属性值设置为relative（绝对的），与绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据空间。

    使用相对定位需要将HTML元素的position属性值设置为relative（相对的），并同样使用4种关于方位的属性关键词left（左边）、right（右边）、top（顶部）、bottom（底端）中的部分内容设置元素的位置。一般来说从水平和垂直方向各选一个关键词即可。

例如，需要将段落元素<p>放置在距离页面顶端150像素、左边100像素的位置：

p{
position: relative;
top:150px;
left:100px
}

 

3.6.3 层叠效果

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

3.6.4 浮动

1. 浮动效果float

    在CSS中float属性可以用于令元素向左或向右浮动。以往常用于文字环绕图像效果，实际上任何元素都可以应用浮动效果。该属性有4种属性值，如表所示。

     在对元素声明浮动效果后，该浮动元素会自动生成一个块级框，因此需要明确指定浮动元素的宽度，否则会被默认不占空间。元素在进行浮动时会朝着指定的方向一直移动直到碰到页面的边缘或者上一个浮动框的边缘才会停下来。

    如果一行之内的宽度不足以放置浮动元素，则该元素会向下移动直到有足够的空间为止再向着指定的方向进行浮动。

 

2. 清理浮动clear

    CSS中的clear属性可以用于清理浮动效果，它可以规定元素的哪一侧不允许出现浮动元素。该属性有5种属性值，如表所示。

例如，常用clear:both来清除之前元素的浮动效果。 

p{
    clear:both;
}

此时该元素不会随着之前的元素进行错误的浮动。