在CSS中，position是控制元素定位的屬性之一。元素的位置可以通過四種不同的取值來指定：static、relative、absolute、fixed。這篇文章將介紹這四種取值的原理。

.static {
position: static;
}

當元素的position設為static時，元素的位置由文檔流決定。這是默認值，也是最常見的取值。元素的left、right、top、bottom、z-index屬性不會起到作用。

.relative {
position: relative;
left: 50px;
}

當元素的position設為relative時，元素的位置相對于其默認位置偏移。此時，left和top屬性可以控制元素的偏移量。如果元素的left值為50px，則元素向右偏移50px。元素的z-index屬性可以設置元素的堆疊順序，越大的元素將覆蓋在前面。

.absolute {
position: absolute;
left: 50px;
top: 50px;
}

當元素的position設為absolute時，元素的位置相對于其上一個有定位的父元素（如果沒有，則相對于文檔）偏移。因此，left和top屬性可以控制元素相對于父元素或文檔的偏移量。如果有多個祖先元素，也要確保他們都有定位屬性。元素的z-index也可以控制元素的堆疊順序。

.fixed {
position: fixed;
right: 0;
bottom: 0;
}

當元素的position設為fixed時，元素的位置相對于視口固定。因此，left和top屬性可以控制元素距離視口邊緣的偏移量。元素的z-index也可以控制元素的堆疊順序。

總結一下，CSS的position屬性可以控制元素的位置和堆疊順序。在不同的取值下，元素的位置偏移、堆疊順序的計算方式也不同。在實際的布局中，需要根據需求選擇不同的取值，并注意更好地控制元素的偏移量和堆疊順序。