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

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

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

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

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

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

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

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

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

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

sticky定位是一種介于fixed定位和relative定位中的特殊定位方式，有點像fixed定位，但有時又像relative定位。它可以做到當用戶滾動到頁面的某個位置時，元素會固定在那個位置；當用戶滾動到另一個位置時，元素又會像正常的relative定位元素一樣。在上面的代碼中，div元素會在滾動到頁面頂部時粘在頁面頂部。