目录
非 VIP 用户可前往公众号回复“css”进行免费阅读
相对定位
相对定位的作用是对元素自身原本的位置进行微调。它不会脱离文档流（即不脱标），其真实位置仍在 “原处”，只是视觉上仿佛有个影子离开了原位。不管是否发生位移，元素始终占据着原来的空间。在布局方面，相对定位能够充当绝对定位的参考点，例如常见的 “子绝父相” 布局模式就是如此。
示例代码如下：
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 100px;
border:1px solid orangered;
}
.box1{
background-color:pink;
}
.box2{
position: relative;
left: 60px;
top: 20px;
background-color:skyblue;
}
.box3{
background-color: plum;
}
</style> html:
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body> 运行结果：
相对定位不脱标示例代码如下：
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
span{
position:relative;
width: 200px;
height: 100px;
padding:20px;
border:1px solid #ccc;
background-color: pink;
left:20px;
top:30px;
}
</style> html:
<body>
<span>span</span>
</body>
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
