定位相关属性positon:relative absolution; z-index;right、right、bottom、left

一、positon:用于设置目标对象的定位当时。
1、如将此属性设置为absolute,完全不受页面其他元素的影响,直接基于页面定位

<!DOCTYPE html>
<html>

	<body>
		<div style="width:100px;height:100px;border:1px solid #111;position:absolute;left:20px;top:20px;">
		</div>
	</body>
<html>

定位相关属性positon:relative absolution; z-index;right、right、bottom、left
代码中加入两个换行符br/,div位置依旧不变

<!DOCTYPE html>
<html>

	<body>
		aa<br/>aa<br/>
		<div style="width:100px;height:100px;border:1px solid #111;position:absolute;left:50px;top:50px;">
		</div>
	</body>
<html>

定位相关属性positon:relative absolution; z-index;right、right、bottom、left

2、如将此属性设置为relative,受其他元素影响,会基于页面中的文本元素定位

<!DOCTYPE html>
<html>

	<body>
		<div style="width:100px;height:100px;border:1px solid #111;position:relative;left:50px;top:50px;">
		</div>
	</body>
<html>

定位相关属性positon:relative absolution; z-index;right、right、bottom、left
代码中加入两个换行符br/,div位置会根据HTML流结束的位置定位

<!DOCTYPE html>
<html>

	<body>
		aa<br/>aa<br/>
		<div style="position:relative;width:100px;height:100px;border:1px solid #111;left:50px;top:50px;">
		</div>
	</body>
<html>

定位相关属性positon:relative absolution; z-index;right、right、bottom、left
3、如将此属性设置为static,页面的left、top等相关定位属性失效;

<!DOCTYPE html>
<html>

	<body>
		<div style="position:static;width:100px;height:100px;border:1px solid #111;left:50px;top:50px;">
		</div>
	</body>
<html>

定位失效
定位相关属性positon:relative absolution; z-index;right、right、bottom、left