绝对定位

定位：基于xxx定位，上下左右

1、没有父元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3、在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

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

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 10px;
            line-height: 20px;
        }
        #father{
            border: 1px solid sandybrown;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #88ec85;
            border: 1px dashed #9ac4d5;
        }
        #second{
            background-color: #FFE53B;
            border: 1px dashed #18f8c3;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: #e4eef1;
            border: 1px dashed #f57474;
        }

    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

 

posted @ 2022-04-11 23:56  少时凌云志  阅读(128)  评论(0)    收藏  举报