靜態(tài)定位
position：static；??
相對定位
?position：relative? ? ? left：100px
①相對定位 以自己的左上角為基準(zhǔn)點(diǎn) 移動?
②相對定位移動后，位置仍然保留，是標(biāo)準(zhǔn)流，不脫標(biāo)
絕對定位
position:absolute；? top：0px；? ?right：0px；? bottom：0px；? left：0px；?
①以當(dāng)前可見窗口左上角為基準(zhǔn)點(diǎn)移動
②父親有定位，以父親的左上角為基準(zhǔn)點(diǎn)移動
③父親沒有定位，爺爺有定位。以爺爺?shù)淖笊辖菫榛鶞?zhǔn)點(diǎn)移動
注意：
加了定位和加了浮動的盒子 ，margin:0 auto;（居中對齊）就失效了，因為定位和浮動都是左對齊。
實(shí)現(xiàn)居中對齊的方法：
left：50%；（父盒子的一半）? margin-left：盒子的一半（負(fù)值）
或者
top：50%? ?（父盒子的一半） margin-top：盒子的一半（負(fù)值）
例如：
<!doctype html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>Document</title>
<style>
.father { width: 300px; height: 300px; background-color: pink; margin: 100px auto; position: relative; }
.son { width: 50px; height: 50px; background-color: red; position: absolute; left: 50%; margin-left: -25px; }
</style>
</head>
<body>
? ????<div class="father">
????????????<div class="son"></div>
????</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>Document</title>
<style>
.father { width: 300px; height: 300px; background-color: pink; margin: 100px auto; position: relative; }
.son { width: 50px; height: 50px; background-color: red; position: absolute; left: 50%; margin-left: -25px; top: 50%; margin-top: -25px;}
</style>
</head>
<body>
? ????<div class="father">
????????????<div class="son"></div>
????</div>
</body>
</html>?
