使用Position的方式來進行定位
阿新 • • 發佈：2018-11-22
一，position的常用值
| 值 | 描述 |
|---|---|
| static | 自動定位 |
| relative | 相對於自己原來的位置來定位(自戀型) |
| absolute | 相對於父親的位置來定位(拼爹型) |
| fixed | 相對於瀏覽器的固定位置(認死理型) |
二，position之static定位
概述：static方式是position的預設定位模式。在該模式下無法使用top、left、right、bottom來進行移動元素。
該定位的唯一作用就是：取消定位
三，position之relative定位（自戀型）
概述：relative方式，會以元素原來的位置為基準，然後在這個基準下，通過top、left、bottom、right進行定位。並且它依然會佔據原來位置的空間。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試position的relative定位</title> <style type="text/css"> .one{ position:relative; top:100px; left:100px; width:200px; height:200px; background-color:#FF8888; } .two{ width:200px; height:200px; background-color: #FFFF00; } .three{ width:200px; height:200px; background-color: #00DDAA; } </style> </head> <body> <!--relative方式，會以元素原來的位置為基準，然後在這個基準下， 通過top、left、bottom、right進行定位。並且它依然會佔據原來位置的空間 --> <div class="one"></div> <div class="two"></div> <div class="three"></div> </body> </html>
四，position之absolute定位(拼爹型)
概述：
①當父層沒有使用position來定位的時候，那麼子層就會以整個網頁作為基準，
通過top、left、bottom、right進行定位。完全不會再佔據空間
②當元素的祖先層時使用position定位的時候，那麼子元素會根據祖先層的位置
來進行定位，通過top、left、bottom、right來進行定位。完全不會再佔據空間
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試position的absolute定位之父層沒有position</title> <style> .father { width: 300px; height: 300px; background-color: #E93EFF ; margin: 0 auto; } .son1 { width: 200px; height: 100px; background-color: #668800 ; position: absolute; top: 200px; left: 50px; } .son2 { width: 200px; height: 100px; background-color: #660077; position: absolute; top: 220px; left: 60px; } </style> </head> <body> <!--當父層沒有使用position來定位的時候，那麼子層就會以整個網頁作為基準， 通過top、left、bottom、right進行定位。完全不會再佔據空間--> <div class="father"> <div class="son1"> </div> <div class="son2"> </div> </div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試position的absolute定位之父層有position</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: #0000AA;
margin: 0 auto;
position: relative;
}
.son {
width: 200px;
height: 100px;
background-color: #FFFF77;
position: absolute;
top:200px;
left:100px;
}
</style>
</head>
<body>
<!--當元素的祖先層時使用position定位的時候，那麼子元素會根據祖先層的位置來進行定位，
通過top、left、bottom、right來進行定位-->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
五，position之fixed定位(認死理型)
概述：使用position的fixed定位，它會固定在某一個位置，不會隨滾動條的滾動而改變位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試position的fixed定位</title>
<style>
.ad {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 100px;
}
</style>
</head>
<body>
<!--使用position的fixed定位，它會固定在某一個位置，不會隨滾動條的滾動而改變位置-->
<div class="ad">
這是一塊不管你怎麼滾動都會在同一位置的內容
</div>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
<p>定位測試</p>
</body>
</html>
六，控制疊放次序(z-index)
概述：對多個元素同時設定定位時，定位元素之間可能會發生重疊。我們可以使用z-index來控制重疊的優先順序。z-index的值越大，其優先順序越大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試疊放次序中調整z-index顯示的優先順序</title>
<style type="text/css">
.father{
position:absolute;
width:500px;
height:500px;
background-color: blue;
top:50px;
left:100px;
z-index: 20;
}
.child{
position: absolute;
width: 500px;
height:500px;
background-color: red;
top:100px;
left:150px;
z-index: 30;
}
.theSmallestChild{
position:absolute;
width: 500px;
height: 500px;
background-color: yellow;
top:150px;
left:200px;
z-index: 10;
}
</style>
</head>
<body>
<div class="father">
</div>
<div class="child">
</div>
<div class="theSmallestChild">
</div>
</body>
</html>
參考之：https://blog.csdn.net/yongqianbao4519/article/details/80949323