relative与absolute区别

最新推荐文章于 2024-11-12 22:56:44 发布

盈玉

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量321

点赞数

文章标签： css html sass

本文链接：https://blog.csdn.net/qq_44198410/article/details/123262384

版权

这篇博客探讨了CSS中relative和absolute定位的区别。relative定位保持元素在文档流中的原始位置，设置top和left属性产生偏移但不影响其他元素。而absolute定位使元素脱离文档流，不占用空间，它会相对于最近的非static祖先元素定位。通过实例展示了如何使用这些定位方式实现列表项的重叠效果。

摘要由CSDN通过智能技术生成

相对定位: 未脱离文档流,占据空间

绝对定位: 脱离了文档流,不占据空间

相对定位:在文档中的正常位置通过top,left给定偏移值,但不影响其他元素偏移

绝对定位:相对于最近的非static的祖先元素定位

列表例子:如何将列表重叠

HTML框架:

  <div class="wrap">
        <ul class="list">
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
            <li class="item">5</li>
        </ul>
    </div>

CSS样式:

 .list {
            width: 800px;
            height: 400px;
            list-style: none;
          
        }

        .item {
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
           
        }

        .item:nth-child(1) {
            background-color: black;
        }

        .item:nth-child(2) {
            background-color: aqua;
        }

        .item:nth-child(3) {
            background-color: rebeccapurple;
        }

        .item:nth-child(4) {
            background-color: yellow;
        }

        .item:nth-child(5) {
            background-color: burlywood;
        }

效果图:

给list添加relative

给item添加absolute

.list {
            width: 800px;
            height: 400px;
            list-style: none;
            position: relative;
        }

        .item {
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
            position: absolute;
        }

效果图