# 定位布局

定位布局

定位可以将元素放到网页中的任意位置，多个标签层叠展示时，需要用到定位布局。

定位的属性名为 position，有4种属性值：

fixed，固定定位
relative，相对定位
absolute，绝对定位
static，静态定位，为默认值

# 固定定位（fixed）

固定定位以浏览器窗口为参照物进行定位，位置不会随着滚动条改变而改变。属性值为 fixed。

position: fixed 只能表示当前元素使用固定定位，还要结合 left、right、top、bottom 一起使用，一般不会4个属性值同时使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: fixed;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <div class="box">box</div>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p><p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
    <p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
</body>
</html>

上例中的 box div 盒子不会随着滚动条的滑动而随之滑动。

固定定位的特点很明显：

使用固定定位的元素会脱标
具备行内块特点，可以设置宽高
以浏览器窗口为参照物进行改变位置

# 相对定位（relative）

相对定位，指的是相对于自己的原始位置进行定位，属性值为 relative。

相对定位要结合 top、bottom、left、right 四个元素进行使用，一般情况下水平和垂直方向各使用一个元素就行。

具体水平位置要使用 left 还是 right，垂直方向要使用 top 还是 bottom，使用就近原则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box {
            height: 400px;
            width: 400px;
            border: 1px solid black;
            background-color: pink;
        }

        #box div {
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background-color: skyblue;
        }

        #box2 {
            position: relative;
            left: 20px;
            top: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="box1">元素1</div>
        <div id="box2">元素2</div>
        <div id="box3">元素3</div>
    </div>
</body>
</html>

上例中3个 div 元素原本会自上而下依次排列，使用相对定位后，元素2会相对自己原本的位置向右向下移动了20像素。

如果 left 和 right 都有值，以 left 为准。

如果 top 和 bottom 都有值，以 bottom 为准。

相对定位不会影响元素的原有显示特点，上例中元素2依旧独占一行。

# 绝对定位（absolute）

绝对定位寻找已定位的父级，如果有父级，父级有定位，则以父级为参照物进行定位；如果有父级，父级没有定位，则以浏览器窗口进行定位。绝对定位的属性值为 absolute。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

        #box2 {
            /* 没有父级，相对于浏览器窗口定位 */
            /* box2 改变元素显示模式为行内块元素 */
            position: absolute;
            left: 0;
            top: 0;

            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="box1">元素1</div>
    <div id="box2">元素2</div>
    <div id="box3">元素3</div>
</body>
</html>

上例中为有父级 body，但是 body 没有定位的情况，此时元素2的绝对定位是以浏览器窗口为参照物。

绝对定位的特点：

元素会脱标，当前元素的上下元素会认为该元素不存在
改变了元素显示特点，具备了行内块的特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #father {
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        #son {
            position: relative;
            
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        #grandson {
            position: absolute;
            right: 20px;
            bottom: 20px;

            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son">
            <div id="grandson">

            </div>
        </div>
    </div>
</body>
</html>

上例中 grandson 元素的父级 son 有定位，则 grandson 元素的绝对定位以父级元素 son 为参照物进行定位。

绝对定位以父级为参照物，这个父级概念为广义的父级，及不单单只父级，父级的父级等等都是可以生效的。

在工作中常用的定位模式为“子绝父相”，即子级使用绝对定位，父级使用相对定位。

“子绝”子元素选择绝对定位是因为子元素不需要占据位置，设置绝对定位元素会脱标；“父相”父元素选择绝对定位是因为父元素需要占据位置，设置相对定位元素不会脱标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            margin: 0 auto;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

上例中使用绝对定位后 margin 的居中效果会失效，这时可以结合 margin 的其他属性实现居中效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            /* margin: 0 auto; */
            left: 50%;
            /* 这个150px就是当前盒子宽度300px的一半 */
            margin-left: -150px;

            top: 50%;
            margin-top: -150px;

            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

# 静态定位（static）

position 属性的默认值就是 static，元素在没有使用到 position 属性时就相当于是静态定位。因此，静态定位一般不常使用。

如果将元素从其他定位方式转为静态定位时，就可以使用静态定位。

← CSS 浮动布局 CSS 装饰效果 →