HTML+CSS网页布局之position定位布局（第6节）

在网页设计中，布局是网页制作的基础。默认情况下，HTML标签都在标准文档流中呈现和展示，如果是块级标签（如div、p等）会独占一行，而行内标签（如span、a等）则会按照标签在HTML中的书写顺序依次排列，不会自动进行换行，并且可以与其他行内标签共享一行。上一节，我们已经详细介绍了可以通过浮动布局脱离标准文档流，但是，浮动布局只有一种排版方式，就是水平排版，它只能设置某个容器在父容器内左对齐或者右对齐。

在复杂的网页布局中，我们可能需要精确控制HTML标签在页面中的位置，position定位布局正是为了解决这一问题而设计的。position定位布局可以实现标签在页面中的精确位置控制。通过设置标签的position属性，可以让标签处于定位状态，并通过left、right、top、bottom属性设置标签具体的偏移量。position属性主要有以下几种值：

‌“position:static‌‌”：这是position属性的默认值，可以省略不写。标签会按照正常的文档流进行布局，不受其他定位属性的影响。

‌“position:relative‌‌”：相对定位。标签会按照文档流的顺序进行布局，但可以通过设置left、right、top、bottom属性来调整标签的位置。相对定位的标签仍然占据原来的空间‌。

‌‌“position:absolute”‌‌：绝对定位。标签会脱离文档流，相对于其最近的非static定位的父标签进行定位。如果没有非static定位的父标签，则相对于整个文档进行定位‌。

‌“position:‌fixed”‌‌：固定定位。标签相对于浏览器窗口进行定位，即使页面滚动，标签的位置也不会改变。fixed定位的标签在文档流中不占空间，层级高于普通文档流‌。

以下是position定位布局的示例代码：

动手练一练：

<!DOCTYPE html>
<html>
    <!--head头部.用来完成一个网页的相关设置-->
    <head>
        <!--汉字编码-->
        <meta charset="UTF-8">
        <!--网页标题-->
        <title>position定位布局</title>
        <style>
            #container {
                width:600px;
            }
            #header {         
                background-color:#005aff;
                text-align:center;
            }
            #menu {
                background-color:#3ae4fd;
                height:300px;
                width:100px;
                text-align:center;
                float:left;
            }
            #content {
                background-color:#e4f985;
                height:300px;
                width:500px;
                text-align:center;
                float:right;
            }
            .div1 {
                background-color:#fcae6f;
                height:60px;
                line-height:60px;
                width:200px;
                text-align:center;
                position:static;
            }
            .div2 {
                background-color:#fc6fb5;
                height:120px;
                line-height:120px;
                width:120px;
                text-align:center;
                position:relative;
                top:100px;
                left:100px;
            }
            .div3 {
                background-color:#fd4d4d;
                height:120px;
                line-height:120px;
                width:120px;
                text-align:center;
                position:absolute;
                top:200px;
                left:50px;
            }
            .div4 {
                background-color:#fd4d4d;
                height:120px;
                line-height:120px;
                width:120px;
                text-align:center;
                position:fixed;
                top:100px;
                left:400px;
            }
            #footer {
                background-color:#2ffd64;
                height:30px;
                clear:both;
                text-align:center;
                padding:10px 10px 5px 5px;
            }
        </style>
    </head>
 <body>
        <div id="container">
            <div id="header">
                <h1 style="margin-bottom:0;padding:10px;">头部区域</h1>
            </div>
            <div id="menu">
                <b>菜单导航</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </div>
            <div id="content">
                <div class="div1">
                    div1:静态定位
                </div>
                <div class="div2">
                    div2:相对定位
                </div>
                <div class="div3">
                    div3:绝对定位
                </div>
                <div class="div4">
                    div4:固定定位
                </div>
            </div>
            <div id="footer">
                ‌底部区域‌：版权 © pyhint.com
            </div>
        </div>
 </body>
</html>

效果如下图所示：

上面的例子中，我们在content容器内创建了四个不同定位布局的div小容器，分别为div1、div2、div3和div4。div1为静态定位（position:static），div2为相对定位（position:relative），div3为绝对定位（position:absolute），div4为固定定位（position:fixed）。从效果图可以看出，通过设置不同的position属性值，可以轻松实现不同的布局效果。

1、静态定位（文档流定位position:static）

前面的例子中，第一个“div1”中定位属性值设置为“position:static”，是position属性的默认值，可以省略不写，属于静态定位。静态定位会依据文档流定位，它的特点如下：

将页面上的标签，按照HTML中的书写顺序依次排列。
行内标签不独占一行，从左到右依次排列。块级标签独占一行，从上到下依次排列。

2、相对定位（position:relative）

前面的例子中，第二个“div2”中定位属性值设置为“position:relative”属于相对定位。相对定位是相对于标签原来的位置进行移动定位，不会脱离文档流。它的特点如下：

标签会按照文档流的顺序进行布局，但可以通过left、right、top、bottom这四个属性来调整偏移的方向和距离。
设置偏移后，标签仍保留在文档流中所占用的位置，但实际上整个标签区域将显示在偏移之后的位置。即虽然标签已经不再原来的位置了，但之前所占用的空间并不会被释放给其他文档流中的标签。

3、绝对定位（position:absolute）

前面的例子中，第三个“div3”中定位属性值设置为“position:absolute”属于绝对定位。绝对定位会脱离文档流，并相对于其最近的非“position:static”定位的父容器进行定位。如果没有非“position:static”定位的父容器，则相对于body标签进行定位。它的特点如下：

脱离文档流。也就是说：绝对定位的标签将不再被文档流中的其它标签所影响。
通过left、right、top、bottom这四个属性来调整偏移的方向和距离。
根据坐标定位到新位置之后，原位置空间会被回收。
如果父容器也为“position:relative”或“position:absolute”定位，那么就以父容器为基准。
如果父容器不是“position:relative”定位，也不是“position:absolute”定位，那么一律以body标签为基准。

4、固定定位（position:fixed）

前面的例子中，第四个“div4”中定位属性值设置为“position:fixed”属于固定定位。固定定位是相对于浏览器窗口进行偏移定位，无论页面如何滚动，标签位置都不会改变，好像固定在网页上一样。它的特点如下：

定位基点是浏览器的可视窗口，这会导致标签的位置不会随页面滚动而变化，将始终固定在指定的位置。
通过left、right、top、bottom这四个属性来调整偏移的方向和距离。
在使用“position:fixed”定位后，标签将脱离文档流，在网页的普通文档流中不占空间，标签的层级显示要优先于普通文档流。

5、z-index属性

在使用定位布局时，绝对定位与固定定位会脱离文档流，可能会出现标签重叠的情况。此时，我们可以使用z-index属性来控制标签的前后显示顺序。在HTML中，z-index属性用于控制标签在页面上的层叠顺序。‌ 标签的z-index值越大，它在层叠顺序中的位置就越高，意味着该标签会比其它标签优先显示。比如“z-index:2”将覆盖“z-index:1”的标签。z-index属性的特点如下：

默认情况下，所有的标签都有一个z-index属性，默认值是0，可以忽略不写。z-index属性值包括：正整数、负整数或0，数值越大，优先级越高。
如果z-index属性值相同，则按照HTML中的书写顺序，写在后面的会覆盖写在前面的标签。
z-index只能应用于相对定位、绝对定位和固定定位的标签，其他标准文档流和浮动布局的标签无效。

在定位布局中，可以通过设置标签的z-index属性来调整标签的覆盖关系，例如：

动手练一练：

<!DOCTYPE html>
<html>
    <!--head头部.用来完成一个网页的相关设置-->
    <head>
        <!--汉字编码-->
        <meta charset="UTF-8">
        <!--网页标题-->
        <title>z-index属性</title>
        <style>
            #container {
                width:600px;
            }
            #header {         
                background-color:#005aff;
                text-align:center;
            }
            #menu {
                background-color:#3ae4fd;
                height:300px;
                width:100px;
                text-align:center;
                float:left;
            }
            #content {
                background-color:#e4f985;
                height:300px;
                width:500px;
                text-align:center;
                float:right;
            }
            .div1 {
                background-color:#fcae6f;
                height:60px;
                line-height:60px;
                width:200px;
                text-align:center;
                position:static;
            }
            .div2 {
                background-color:#fc6fb5;
                height:120px;
                line-height:120px;
                width:120px;
                text-align:center;
                position:relative;
                top:100px;
             left:140px;
                z-index:2;
            }
            .div3 {
                background-color:#fd4d4d;
                height:120px;
                line-height:120px;
                width:120px;
                text-align:center;
                position:absolute;
                top:170px;
             left:300px;
                z-index:1;
            }
            .div4 {
                background-color:#655afc;
                height:120px;
                line-height:120px;
                width:120px;
                text-align:center;
                position:fixed;
                top:100px;
             left:260px;
            }
            #footer {
                background-color:#2ffd64;
                height:30px;
                clear:both;
                text-align:center;
                padding:10px 10px 5px 5px;
            }
        </style>
    </head>
 <body>
        <div id="container">
            <div id="header">
                <h1 style="margin-bottom:0;padding:10px;">头部区域</h1>
            </div>
            <div id="menu">
                <b>菜单导航</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </div>
            <div id="content">
                <div class="div1">
                    div1:静态定位
                </div>
                <div class="div2">
                    div2:相对定位
                </div>
                <div class="div3">
                    div3:绝对定位
                </div>
                <div class="div4">
                    div4:固定定位
                </div>
            </div>
            <div id="footer">
                ‌底部区域‌：版权 © pyhint.com
            </div>
        </div>
 </body>
</html>

效果如下图所示：

上面的例子中，我们在content容器内创建了四个不同定位布局的div容器标签，分别为div1、div2、div3和div4，并为div3容器的z-index值设置为1，div2容器的z-index值设置为2，其它两个容器的z-index值默认值都是0。当我们在浏览器中运行该代码时，会发现div2容器会覆盖其它容器。