文章目錄
一、什麼是position?
- position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。
- 他有以下5個屬性值 分別是:
- static靜態定位
- absulote絕對定位
- relative相對定位
- fixed固定定位
- sticky粘性定位
在開始講解之前我們先引入一個css文件，它是預先編譯好的css樣式，作用是起到一些提示效果。
-
在head標籤加入:
<link rel="stylesheet" href="https://codingstartup.com/assets/css-position/hint.css">
二、static 靜態定位(默認)
- HTMl裏邊所有元素的的position默認值都是static
- 忽略 top, bottom, left, right 或者 z-index 聲明，即不支持屬性
注意: static會跟隨HTML的排版(flow移動）
![在這裏插入圖片描述]()
三、absolute 絕對定位
-
absolute會固定在所設定的位置，不跟隨排版移動
-
absolute如果在子級，那麼它會根據父級的absolute和relative定位，但不會根據父級的static來定位
HTMl+CSS<style> .height{ width: 750px; height: 120px; } /* 絕對定位 */ .absolute{ position: absolute; width: 240px; height: 240px; right: 80px; bottom: 60px; } </style> <body> <div class="height"></div> <div class="absolute"></div> </body>效果:
![在這裏插入圖片描述]()
-
我們多加幾個藍色的div來看看absolute的位置會不會改變
<body> <div class="height"></div> <div class="height"></div> <div class="height"></div> <div class="height"></div> <div class="height"></div> <div class="height"></div> <!-- <div class="static"></div> --> <div class="absolute"></div> </body>
效果：
- 可以看到absulote的位置並沒有發生改變
- 但是當頁面出現滾動條的時候，它會隨着滾動條移動
![在這裏插入圖片描述]()
3.1 absulote 嵌套用法 同一個父元素
- 如果同一個父元素有相同的absulote的話，他們就會重疊
- 這裏爲了區分是否重疊，我們把第二個div的right增加l爲100
<body>
<div class="height"></div>
<div class="absolute"></div>
<div class="absolute" style="right: 100px;"></div>
</body>
3.2 absulote 嵌套用法
- 如果在absulote的裏邊寫一個absolute，那麼裏邊的absolute則會依據父元素的absolute來定位。如果父元素沒有absolute,那麼它會一直找上去，直到找到body
- 所以裏邊的div會再向左偏移80px和向上偏移60px，
<body>
<div class="height"></div>
<div class="absolute">
<div class="absolute"></div>
</div>
</body>
四、relative 相對定位
重點：在它裏邊的absolute元素會根據relative的位置去定位
- relative與satic很相似，都會跟隨HTML的排版(flow)移動， 但是它relative相比static多了left、right、top、bottom,
- 雖然relative會跟隨HTML的排版移動，但是可以通過這四個值來調整位置
HTML+CSS
效果:.relative{ position: relative; width: 360px; height: 360px; top: 60px; left: 150px; } <body> <div class="height"></div> <div class="relative"></div> </body>
![在這裏插入圖片描述]()
4.1 relative裏邊的absolute
- relative裏邊的absolute會根據relative來定位
HTML+CSS
/* 絕對定位 */
<style>
.absolute{
position: absolute;
width: 240px;
height: 240px;
right: 80px;
bottom: 60px;
}
/* 相對定位 */
.relative{
position: relative;
width: 360px;
height: 360px;
top: 60px;
left: 150px;
}
</style>
<body>
<div class="height"></div>
<div class="height"></div>
<div class="relative">
<div class="absolute"></div>
</div>
</body>
效果：
五、fixed 固定定位
5.1 會固定到熒幕中的固定位置，即使滾動頁面，也不會發生變化
<style>
.fixed{
position: fixed;
width: 240px;
height: 240px;
left: 80px;
bottom: 60px;
}
</style>
<body>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="fixed"></div>
</body>
5.2 fixed與其他定位的嵌套使用
-
如果fixed 設定有 left、right、top、bottom屬性，即使放在relative與absolute裏邊，fixed也會根據頁面(body)去定位。
如果沒有設定它則以文檔流方式存在。 -
沒有設定left、right、top、bottom屬性
HTML+CSS<style> .relative{ position: relative; width: 360px; height: 360px; top: 60px; left: 150px; } .fixed{ position: fixed; width: 240px; height: 240px; left: 80px; bottom: 60px; } </style> <body> <div class="height"></div> <div class="absolute "> <div style="position: fixed;width: 50px;height: 50px;background-color: #000000;"></div> </div> </body>效果:
![在這裏插入圖片描述]()
-
設定left、right、top、bottom屬性
<body> <div class="height"></div> <div class="relative "> <div style="position: fixed;width: 50px;height: 50px;background-color: #000000;bottom:100px"></div> </div> </body>效果:
![在這裏插入圖片描述]()
六、sticky 粘性定位
- 它的行爲就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
- sticky會在滾動的過程當中貼到頂部，原因是我們將它的top設置爲0
![在這裏插入圖片描述]()
