CSS绝对定位

最新推荐文章于 2023-11-27 14:47:36 发布

Paranoid_truggle

最新推荐文章于 2023-11-27 14:47:36 发布

阅读量241

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Paranoid_truggle/article/details/119109392

版权

绝对定位

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    绝对定位
            定位：基于父元素定位，上下左右
            1.没有父级元素定位的前提下，会相对于浏览器定位
            2.假设父级元素存在定位，通常会相对于父级元素进行偏移
                 #father{
            position: relative;
                   }
                    #second{
            position: absolute;
            right: 30px;
                  }
            3.在父级元素范围内移动
              相对于父级元素或浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，原来的位置不会保留
-->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding:5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid orange;
            position: relative;
        }
        #first{
            background-color: #ff5777;
            border: 1px dashed #db0774;

        }
        #second{
            background-color: #0aefc1;
            border: 1px solid #5bb31d;
            position: absolute;
            right: 30px;
            top:-10px;
        }
        #third{
            background-color: #5bb31d;
            border: 1px solid #0aefc1;

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