一、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>
代码中加入两个换行符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>
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>
代码中加入两个换行符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>
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>
定位失效