CSS中設(shè)置元素的位置是很重要的一個(gè)方面，在網(wǎng)頁排版中起著至關(guān)重要的作用。CSS提供了五種設(shè)置位置的方式：static、relative、absolute、fixed、sticky。接下來我們就來一一介紹。

//static位置
div {
position: static;
}

在CSS中，static是所有元素的默認(rèn)值，即沒有進(jìn)行任何特殊設(shè)置的元素都是static定位，這個(gè)位置通常被稱為默認(rèn)位置，也就是元素按照文檔流正常排版的位置。

//relative位置
div {
position: relative;
top: 20px;
left: 50px;
}

對(duì)于relative定位，元素是相對(duì)于其原始位置進(jìn)行定位。在上面的代碼中，div元素將會(huì)在原始位置向下偏移20像素，并向右偏移50像素。

//absolute位置
div {
position: absolute;
top: 30px;
left: 100px;
}

absolute定位是相對(duì)于它的最近的非static定位的父元素進(jìn)行定位的。如果沒有這樣的父元素，則相對(duì)于文檔的body元素進(jìn)行定位。在上面的代碼中，div元素是相對(duì)于其非static定位的祖先元素（如父元素）進(jìn)行定位的。

//fixed位置
div {
position: fixed;
top: 0;
left: 0;
}

fixed定位會(huì)使元素相對(duì)于瀏覽器窗口進(jìn)行定位。這意味著無論滾動(dòng)瀏覽器窗口，元素都會(huì)保持在同一位置。在上面的代碼中，div元素會(huì)總是在瀏覽器窗口的左上角。

//sticky位置
div {
position: -webkit-sticky;
position: sticky;
top: 0;
}

sticky定位是一種介于fixed定位和relative定位中的特殊定位方式，有點(diǎn)像fixed定位，但有時(shí)又像relative定位。它可以做到當(dāng)用戶滾動(dòng)到頁面的某個(gè)位置時(shí)，元素會(huì)固定在那個(gè)位置；當(dāng)用戶滾動(dòng)到另一個(gè)位置時(shí)，元素又會(huì)像正常的relative定位元素一樣。在上面的代碼中，div元素會(huì)在滾動(dòng)到頁面頂部時(shí)粘在頁面頂部。