定位是 CSS 中非常重要的一部分，通過(guò)定位，我們可以擺放頁(yè)面上的 HTML 元素的位置和大小。CSS 中提供了五種定位方式，分別為 static、relative、absolute、fixed 和 sticky。

下面我們來(lái)分別了解一下這五種定位方式：

/* static 定位是默認(rèn)情況下所有元素的定位方式，它的元素在頁(yè)面中遵從正常的文檔流，不會(huì)受到 top、bottom、left 和 right 屬性的影響 */
p.static {
position: static;
top: 50px;
bottom: 20px;
left: 100px;
right: 200px;
}
/* relative 定位是根據(jù)元素本身的位置進(jìn)行定位，在元素不被定位時(shí)表現(xiàn)得和 static 一樣 */
p.relative {
position: relative;
top: 50px;
bottom: 20px;
left: 100px;
right: 200px;
}
/* absolute 定位是根據(jù)相對(duì)于距離它最近的非 static 定位的父元素的位置進(jìn)行定位，如果沒(méi)有，則是整篇文檔的位置 */
p.absolute {
position: absolute;
top: 50px;
bottom: 20px;
left: 100px;
right: 200px;
}
/* fixed 定位是根據(jù)視窗進(jìn)行定位，元素的位置始終相對(duì)于視窗 */
p.fixed {
position: fixed;
top: 50px;
bottom: 20px;
left: 100px;
right: 200px;
}
/* sticky 定位是基于元素在文檔流中的位置進(jìn)行定位的，它保證元素始終是可見的，即使頁(yè)面在滾動(dòng)時(shí) */
p.sticky {
position: sticky;
top: 50px;
bottom: 20px;
left: 100px;
right: 200px;
}

除了以上五種定位方式，還可以使用 z-index 屬性來(lái)控制元素的層級(jí)關(guān)系，值越大，元素在層級(jí)中越高。

定位是 CSS 中非常重要的一部分，我們可以通過(guò)它來(lái)布局頁(yè)面，實(shí)現(xiàn)更加靈活和精細(xì)的效果。