1.定义一个父级div,添加style属性:position:relative
<div style="position:relative">
</div>
- 此时定义在该div内的所有元素都将随着该父级div的调整而做出调整
2.与某个方向间隔
- 设置了该div的style属性:opsition:relative 之后,即可将该div自由地与某个方向间隔,分别有如下四种属性。
- left: 10px 表示与左边间隔10px。(多少px看实际需求)
- right:10px 表示与右边间隔10px。
- top:10px 表示与上边间隔10px。
- button:10px 表示与下边间隔10px。
- 可以多个方位一起使用达到精准定位。
<div style="position:relative;left:10px;top:20px">
</div>
3.为该父级div添加子div
- 设置style的属性为position:relative, 即可将其作为父级div的子元素,进行位置调整,如下所示。
<div style="position:relative">
<div style="position:absolute">
<h1>儿子1</h1>
</div>
<div style="position:absolute">
<h1>儿子2</h1>
</div>
</div>
- 设置完子div的style属性之后,两个子div会叠加在一起,此时即可根据方位属性进行定位。
- 父div调整位置时候所有子div将会一起移动。