Bootstrap学习笔记01-div绝对定位

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将会一起移动。