4.css高级布局及定位

1.版心和布局流程

为什么要应用布局？
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作
网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
版心：
    “版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为
    960px、980px、1000px等。
布局流程
  为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
      1、确定页面的版心（可视区）。
      2、分析页面中的行模块，以及每个行模块中的列模块。
      3、运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

2.元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。
1、定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
        选择器{position:属性值;}
position属性的常用值：
     值                                描述
  static                     自动定位（默认定位方式）
  relative                   相对定位，相对于其原文档流的位置进行定位
  absolute                   绝对定位，相对于其上一个已经定位的父元素进行定位
  fixed                      固定定位，相对于浏览器窗口进行定位
元素的定位属性主要包括定位模式和边偏移两部分。
2、边偏移
在CSS中，通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位
的数值或百分比。具体解释如下表所示：
        边偏移属性                 描述
    top               顶端偏移量，定义元素相对于其父元素上边线的距离
    bottom            底部偏移量，定义元素相对于其父元素下边线的距离
    left              左侧偏移量，定义元素相对于其父元素左边线的距离
    right             右侧偏移量，定义元素相对于其父元素右边线的距离

3.静态定位static

静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所
谓静态位置就是各个元素在HTML文档流中默认的位置。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

4.相对定位relative （自恋型）

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元
素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位
置仍然保留。如下图所示，即是一个相对定位的效果展示：

相对定位.png

5.绝对定位absolute(看脸型)

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有
定位，则依据body根元素进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为
绝对定位。如下图所示，即是一个相对定位的效果展示：

绝对定位.png

6.绝对定位的特性

• 包裹性
• 根据实际内容来撑开绝对定位元素的大小。
• 破坏性，导致父容器塌陷
• 由于脱离了文档流，导致父容器塌陷。
• 悬浮性
• 会漂浮起来，在原始流的元素之上。

7.固定定位fixed（说一不二型）

固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取
值为fixed时，即可将元素的定位模式设置为固定定位。当对元素设置固定定位后，它将脱离标准文档流的
控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小
如何变化，该元素都会始终显示在浏览器窗口的固定位置。
注意:IE6浏览器不支持固定定位

10.z-index层叠等级属性

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠

z-index重叠.png

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正
整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
定义靠后的，默认在之前的元素之上。不要滥用z-index;
父容器的z-index会影响子元素的层级级别。