前端（七）定位流-二、绝对定位

时间：2024-12-19 08:58:41

绝对定位就是寻找父级标签中设置为定位流的标签(相对定位、绝对定位、固定定位)，自身相对于这个标签进行移动，如果父级标签不存在定位流的标签则会找body作为参考标签，如果父级标签存在多个定位流标签，则会选择离自身近的标签作为参考标签。
绝对定位使用position:absolute，同样需要设置top、bottom、left、right，并且top和bottom、right和left只能同时设置一个。
另外绝对定位是完全脱离文档流的，这就意味着绝对定位不区分块级、行内、行内块级元素，可以给这些元素设置宽高，同时绝对定位在文档流中不占用位置，下方元素会顶上设置绝对定位的元素位置。
此外绝对定位还有几个注意点：

  • 绝对定位把body作为参考标签时实际参考的是首屏(当前屏幕)的宽高，因此设置 bottom: 0;right: 0;会将标签设置在首屏的最下侧，该标签不会随滚动条的移动而移动。
  • 绝对定位会忽视父级标签的padding。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
    	*{
            padding: 0;
            margin: 0;
        }
        .box1 {
            background-color: red;
            position:absolute;
            bottom: 0;
            right: 0;
            width: 100px;
            height: 100px;
        }
        .box2 {
            background-color: green;
            width: 1000px;
            height: 1000px;
        }

    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

另外在绝对定位中不能使用margin:0 auto;进行盒子居中了，如果想让盒子居中可以设置left: 50%; top:50%;margin-left:-元素宽度一半px; margin-top:-元素高度度一半px;
如果设置绝对定位的盒子是参考body标签，则可以设置
{background-color:red;position:absolute;top:0;bottom:0;left:0;right:0}实现填满整个网页的效果。

另外在实际应用中还有一个小技巧，可以将父标签设置为相对定位但是不移到位置，以此来实现子标签绝对定位*移动位置的效果，称之为子绝父相。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }

        .box2 {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            left: 100px;
            top:100px;
        }
    </style>
</head>
<body>

<div class="box1">
    <div class="box2"></div>
</div>

</body>
</html>

相关文章