相对定位的定位值

最新推荐文章于 2024-09-15 21:53:51 发布

正在修炼web的小芮

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量83

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_71814235/article/details/125644674

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

可以用left、right来描述盒子右、左的移动；

可以用top、bottom来描述盒子的下、上的移动。

↘：(右下)

position: relative;

top: 10px;

left: 40px;

↙：(左下)

position: relative;

right: 40px;

top: 10px;

↖：(左上)

position: relative;

right: 40px;

bottom: 10px;

↗：(右上)

position: relative;

right: -40px;

top: -40px;

等价于：

position: relative;
right: -40px;
bottom: 40px;

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 600px;
            height: 600px;
            margin: 0 auto;
            margin-top: 30px;
            border: 8px solid blue;
        }
        .son{
            width: 260px;
            height: 260px;
            background-color: orange;
             /* 相对定位的定位值 */
             position: relative;
             /* 右下 */
             /* top: 30px;
             left: 50px; */
             /* 左下 */
             /* top: 10px;
             right: 40px; */
             /* 左上 */
            /* right: 40px;
              bottom: 10px; */
             /* 右上 */
             right: -40px;
             bottom: 30px;
        }

.son2{
    width: 260px;
    height: 260px;
    background-color: pink;
}
</style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
        <div class="son2"></div>
    </div>
</body>

预览