一、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>
定位失效
二、z-index
用于设置目标对象的漂浮层的层序,该值越大,漂浮层越浮于上面。此属性仅当position属性值为relative或absolute时有效。
用position-absoluted设置两个相同位置的div z-index设置不同,背景颜色设置不同
background-color:blue;z-index:3;
background-color:yellow;z-index:4;
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="position:absolute;z-index:3;left:20px;top:20px;width:40px;height:42px;background-color:blue;">
</div>
<div style="position:absolute;z-index:4;left:20px;top:20px;width:40px;height:42px;background-color:yellow;">
</div>
</body>
</html>
background-color:blue;z-index:3;
background-color:yellow;z-index:2;
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="position:absolute;z-index:3;left:20px;top:20px;width:40px;height:42px;background-color:blue;">
</div>
<div style="position:absolute;z-index:2;left:20px;top:20px;width:40px;height:42px;background-color:yellow;">
</div>
</body>
</html>
三、absolute和relative配合使用
定义一个div套在另一个div中。外面div(position:realtive),里面div(position:absolute)
四、right、left、bottom、top
如果想把div位置定位到右下角,用决定定位设置right和bottom更简单