绝对定位技巧

阅读次数: 次 2020-08-02

字数：986字 | 预计阅读时长：4分钟

绝对定位元素：position值为absolute或者fixed的元素

对于绝对定位元素来说:

定位参照对象的宽度 = left+right+margin-left+margin-right+绝对定位元素的实际占用宽度
定位参照对象的高度= top+bottom+margin-top+margin-bottom+绝对定位元素的实际占用宽度

官方文档中：margin-left和margin-right和margin-top和margin-bottom的值默认为0

实现子元素完全占据父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: peachpuff;
        }

        .content {
            position: absolute;
            /* 只设置高度 */
            height: 100px;
            background-color: orange;
            /* 可实现占据父元素的宽度 */
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body>
</html>

定位参照对象的宽度 = left+right+margin-left+margin-right+绝对定位元素的实际占用宽度

当将left、right设置为0时，margin-left、margin-right默认值也是0，最终定位参照对象(父元素)的宽度 = 绝对定位元素(子元素)的实际占用宽度，这样便可以实现子元素完全占据父元素宽度。

当将top、bottom也设置为0时，margin-top、margin-bottom默认值也是0，最终定位参照对象(父元素)的高度 = 绝对定位元素(子元素)的实际占用高度，这样便可以实现子元素完全占据父元素高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: peachpuff;
        }

        .content {
            position: absolute;
            /* 不再设置高度 */
            /* height: 100px; */
            background-color: orange;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body>
</html>

实现内容居中

left、right、top、bottom的默认值为auto

定位参照对象的宽度 = left+right+margin-left+margin-right+绝对定位元素的实际占用宽度

如果给参照对象设置了宽度(400px)，也给绝对定位元素设置了宽度(200px)，则还剩200px。但是由于left、right的默认值为auto，如果它们两者均为auto时，绝对定位元素(子元素)将处在它如果作为静态元素时的。如果left、right的值保持默认值auto不变，将会有4个auto，浏览器将无法计算出该给margin-left和margin-right的auto分配多少。

因此，需要将left、right的值设置为一个固定的值，一般设置为0，或者其他值(左右相等即可)，再指定margin-left和margin-right的值为auto,就会使子元素实现居中效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: peachpuff;
        }

        .content {
            position: absolute;
			width: 200px;
            height: 200px;
            background-color: orange;
            /* 可实现占据父元素的宽度 */
            left: 0;
            right: 0;
            /* 指定margin值为auto */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body>
</html>

同理，如果指定了top、bottom也是一个固定的值，再指定margin-top、margin-bottom的值为auto,将会实现垂直方向的居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: peachpuff;
        }

        .content {
            position: absolute;
            background-color: orange;
            /* 设置固定宽高 */
            width: 200px;
            height: 200px;

            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            /* 指定margin为auto */
            margin: auto auto;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body>
</html>

补充

本文作者： CoderLeiShuo
本文链接：https://coderleishuo.github.io/lele/45942.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

好的东西应该像粥，是用时间熬出来的—— CoderLeiShuo