相对定位

<doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>study</title>
    <style>
        .w{height: 100px;border: 1px solid lightgreen;margin: 5px;}
        .y{height: 20px;border: 1px solid lightblue;margin: 5px;background-color: antiquewhite;}
        .e{height: 20px;border: 1px solid lightblue;margin: 5px;background-color: antiquewhite;}
        .s{height: 20px;border: 1px solid lightblue;margin: 5px;background-color: antiquewhite;
        position: relative;top: 10px;}
    </style>
</head>
<!-- solid 实线 -->
<!-- 背景颜色 -->
<!-- position: absolute; 定位
相对定位 相对于自己
上 top: 10px  左 left: 10px; 下 bottom: 10px;  右 right: 10px;-->
<body>
    <div class="w">
        <div class="y">第一个盒子</div>
        <div class="e">第二个盒子</div>
        <div class="s">第三个盒子</div>
    </div>
</body>
</html>
posted @ 2023-03-18 11:08  小小的羊  阅读(35)  评论(0)    收藏  举报