CSS 定位布局

虽然浮动布局比较灵活，但是不容易控制，定位布局的出现，使得用户精准定位页面中的元素成为可能，页面布局也随心所欲。但定位布局缺乏灵活性，给空间大小和位置不确定的版面布局带来困惑，所以在实际开发中，要灵活使用这两种布局。

定位布局使用 position 属性来实现，属性值如下：

属性值	说明
fixed	固定定位
relative	相对定位
absolute	绝对定位
static	静态定位（默认值）

一、固定定位

固定定位的实现方式：position:fixed;，固定的元素不会随着滚动条的拖动而改变位置，要结合 top、bottom、left、right 属性一起使用，用来规定元素相对于浏览器的位置，这四个属性一般只用到两个，参考值是浏览器的四条边。

有如下示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            .div1{
                height: 2000px;
                width: 200px;
                background-color: rgb(141, 212, 120);
                display: table-cell;
                vertical-align: middle;
            }
            .div2{
                height: 100px;
                width: 100px;
                position: fixed;
                background-color: darkseagreen;
                top: 100px;
                left:300px;
            }
        </style>
    </head>
    <body>
        <div class="div1">没有设置定位的元素</div>
        <div class="div2">设置了定位的元素</div>
    </body>
</html>
复制代码

右边 div 在滚动条滚动时位置不变，左边变化：

固定定位最常见的一个应用：回顶部按钮。

二、相对定位

相对定位的实现方式：position:relative;，相对定位是指元素的位置相对于原始位置计算而来的，也要搭配 top、bottom、left、right 四个属性使用，通常使用两个即可。

固定定位是相对于浏览器的位置，绝对定位是相对于元素本身的位置。

当两个 div 均没有设置定位时：

现在，使第一个 div 不变，为第二个 div 设置相对定位：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            .div1{
                height: 100px;
                width: 200px;
                background-color: rgb(141, 212, 120);
            }
            .div2{
                height: 100px;
                width: 200px;
                background-color: darkseagreen;
                position: relative;
                top: 20px;
                left:20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
    </body>
</html>
复制代码

可以看到，元素相对于它原来的位置偏移了：

我们再加一个不设置定位的 div3：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            .div1, .div3{
                height: 100px;
                width: 200px;
                background-color: rgb(141, 212, 120);
            }
            .div2{
                height: 100px;
                width: 200px;
                background-color: darkseagreen;
                position: relative;
                top: 20px;
                left:20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </body>
</html>
复制代码

在浏览器中效果如下：

由上图可见，虽然第二个 div 较原来的位置偏移了，但它仍然占据未偏移时的位置，并不影响文档流，其后的元素仍按原始文档流排列。

三、绝对定位

使用方式：position:absolute; ，当使用绝对定位时，此元素脱离文档流，其他元素会当这个元素不存在。此属性也要结合 top、bottom、left、right 属性一起使用，通常只需要两个，~~参考对象是浏览器的四条边~~,参考对象是距离此元素最近的非 static 定位的祖先元素。（感谢 @2021Free 的指正，具体解释在文章最后一部分）

有如下示例，div2 为绝对定位：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            .div1, .div3{
                height: 100px;
                width: 200px;
                background-color: rgb(141, 212, 120);
                border: 1px solid black;
            }
            .div2{
                height: 50px;
                width: 50px;
                background-color: azure;
                position: absolute;
                top: 50px;
                left:50px;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </body>
</html>
复制代码

在浏览器中效果如下：

由上图可见，绝对定位的 div2 已经脱离文档流，不影响其他元素的排列。

四、静态定位

在默认情况下，元素是静态定位的，即正常出现在标准文档流中，对其的 top、bottom、left、right 不生效。

五、绝对定位的参考对象

绝对定位的参考对象是距离此元素最近的非 static 定位的祖先元素。

首先是祖先元素均为 static 定位的情况：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            .div1{
                height: 400px;
                width: 400px;
                background-color: rgb(141, 212, 120);
                border: 1px solid black;
            }
            .div2{
                height: 100px;
                width: 100px;
                background-color: azure;
            }
            .div3{
                height: 100px;
                width: 100px;
                background-color: blueviolet;
                position:absolute;
                top: 200px;
                left:0px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
                <div class="div3">
                    我是绝对定位元素
                </div>
            </div>
        </div>
    </body>
</html>
复制代码

div3 为绝对定位，为了便于观察，将 div3 的左偏移设为 0 ，可见当元素的所有祖先元素均为 static 定位时，元素绝对定位是相对于浏览器的四条边偏移：

改变 div1 的定位方式：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            .div1{
                height: 400px;
                width: 400px;
                background-color: rgb(141, 212, 120);
                border: 1px solid black;
                position: relative;
            }
            .div2{
                height: 100px;
                width: 100px;
                background-color: azure;
            }
            .div3{
                height: 100px;
                width: 100px;
                background-color: blueviolet;
                position:absolute;
                top: 200px;
                left:0px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
                <div class="div3">
                    我是绝对定位元素
                </div>
            </div>
        </div>
    </body>
</html>
复制代码

这时，div3 的定位便相对于 div1 偏移（左偏移为 0 时，紧贴着 div1 的左 border）：

同时改变 div1 和 div2 的定位方式：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            .div1{
                height: 400px;
                width: 400px;
                background-color: rgb(141, 212, 120);
                border: 1px solid black;
                position: relative;
            }
            .div2{
                height: 100px;
                width: 100px;
                background-color: azure;
                position: relative;
                left: 20px;
                top: 20px;
            }
            .div3{
                height: 100px;
                width: 100px;
                background-color: blueviolet;
                position:absolute;
                top: 200px;
                left:0px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
                <div class="div3">
                    我是绝对定位元素
                </div>
            </div>
        </div>
    </body>
</html>
复制代码

可以发现，div3 此时的定位是相对于 div2 进行偏移的，由此体现了 “最近祖先”：

综上，可得绝对定位的元素在其所有祖先元素均为 static 定位时，偏移值参考浏览器的四条边；当有非 static 定位的祖先元素时，偏移值参考最近的非 static 定位的祖先元素。