html相对定位

作者：只言片語中发布日期:2025-11-16 浏览:112

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义一个相对定位的元素 */
        .relative-box {
            position: relative;
            width: 200px;
            height: 100px;
            background-color: lightblue;
            /* 相对自身的位置进行偏移 */
            left: 30px;
            top: 20px;
        }
    </style>
</head>
<body>

<div class="relative-box">
    这是一个相对定位的盒子。
</div>

</body>
</html>

解释说明：

position: relative;：设置元素为相对定位。这意味着该元素会根据它在正常文档流中的位置进行定位，但可以通过 top, left, bottom, right 属性来调整它的位置。
left: 30px; 和 top: 20px;：表示将元素从其原始位置向右移动 30 像素，向下移动 20 像素。

上一篇：html动画

下一篇：div在html是什么意思