定位相关属性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>
代码中加入两个换行符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>
定位失效