html相对定位的默认位置

75次阅读
没有评论

HTML 相对定位元素的默认位置是与文档流中的其它元素相同,也就是说,它们的默认位置是在文档中按照其在 HTML 代码中出现的顺序依次排列。

当一个元素被设置为相对定位时,它不会改变其在文档流中的位置,但是可以通过设置 top, bottom, left, 和 right 属性来相对于其原始位置进行移动。

以下是一个完整的 HTML 页面 UTF-8 示例,其中包含一个默认位置的相对定位元素:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Relative Positioning Example</title>
    <style>
        .box {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<p>This is a paragraph.</p>
<div class="box"></div>
</body>
</html>

在上面的示例中,我们定义了一个名为 .box 的 div 元素,并将其 position 属性设置为 relative。我们在文档流中放置了两个 .box 元素,它们默认的位置是一个在另一个后面的水平排列。

请注意,在示例中,我们没有设置 top, bottom, left, 或 right 属性来移动元素,所以它们仍然位于其在文档流中的默认位置。

正文完
 1
评论(没有评论)