相对定位

关注

原创最新推荐文章于 2026-08-19 14:12:18 发布 218 阅读 AI 写同款· GEO 优化 ›

【锂离子电池力学耦合及相场法模拟技术与应用】 8. 电化学仿真软件的使用与案例分析 (1) 各向异性纳米线锂化应力分析（实例讲解1） (2) 化学反应及死锂现象研究（案例分析2）(3) 锂化循环损伤计算（案例分析3）6. 4. 电池材料的力学与电化学耦合性能分析(1) 耦合效应对电池性能的影响(2) 耦合模型的验证与应。5. 5. 电池颗粒、极片、电芯尺度力-电-化-热多场耦合模型概述力学-7. 颗粒尺度耦合模型在电池失效分析中的应用。2. 2. 电池电极材料的分类与特性。5. (2) 耦合模型的验证与应用。电化学耦合模型与仿真。阅读详情

相对定位

如下图所见，有三个盒子竖着放，分别是红、蓝、绿
在这里插入图片描述
最外层为父元素，class=f，里面包裹着三个盒子

<div class="f">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
    </div>

分别给它们制定样式

.f {
            height: 650px;
            width: 500px;
            background-color: antiquewhite;
            border: 1px solid black;
        }
        
        .c1 {
            width: 200px;
            height: 200px;
            background-color: brown;
        }
        
        .c2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .c3 {
            width: 200px;
            height: 200px;
            background-color: green;
        }

要求：
希望中间的蓝色盒子和第一排的红色盒子一排，并且下面的绿色盒子不会挪动
在这里插入图片描述
要达到这种效果，只需要在中间的蓝色盒子样式中添加position:relative; top: -200px; left: 200px;
如下：

.c2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
            left: 200px;
            top: -200px;
        }

解释：
这里其实是开启了c2盒子的相对定位，相对于原来位置挪动，也就是下面这个点：原来位置的左上方的点，因此top为-200是向上移动，left为200是向右移动
在这里插入图片描述
特性：
1、除此之外，在上面的图中可以看到，下面的绿色盒子并没有因为中间盒子的移动而上移，因此证明蓝色盒子并没有脱离文档流
2、相对定位的盒子会提升一层，也就是说，像下图中这样，当开启蓝色盒子的浮动，并且位置正好和红色盒子的相同时，它会覆盖在上面，提升一层
在这里插入图片描述