position: relative；用法top bottom用法

最新推荐文章于 2024-11-16 23:41:41 发布

原创最新推荐文章于 2024-11-16 23:41:41 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

本文通过HTML代码示例展示了<div>元素中使用relative定位结合top和bottom属性如何影响内容位置。relative定位允许在不脱离文档流的情况下移动内部内容，是绝对定位的一个简化形式。

 <div style="height: 100px;width: 100px;background-color: yellow;">2</div>
    <div style="height: 100px;width: 100px;background-color: red;">3</div>
    <div style="height: 100px;width: 100px;background-color: blue;">4</div>

我们看看加上top会怎么样

    <div style="height: 100px;width: 100px;background-color: yellow;">2</div>
    <div style="height: 100px;width: 100px;background-color: red;position: relative;top: 80px;">3</div>
    <div style="height: 100px;width: 100px;background-color: blue;">4</div>

看看Bottom

    <div style="height: 100px;width: 100px;background-color: yellow;">2</div>
    <div style="height: 100px;width: 100px;background-color: red;position: relative;bottom: 80px;">3</div>
    <div style="height: 100px;width: 100px;background-color: blue;">4</div>