CSS定位與自適應是網頁設計中的重要概念。CSS定位可以讓我們根據需要靈活地控制HTML元素的位置和大小，而自適應的效果則可以讓網頁在不同設備和分辨率下都能夠呈現出優美的布局。

/*CSS定位*/
position: relative;
position: absolute;
position: fixed;
/*自適應*/
@media screen and (max-width: 480px) {
/*樣式*/
}
@media screen and (min-width: 481px) and (max-width: 768px) {
/*樣式*/
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/*樣式*/
}
@media screen and (min-width: 1025px) {
/*樣式*/
}

在CSS中，定位可以使用relative、absolute和fixed三種方式。relative是相對定位，元素的位置基于它原本的位置進行調整；absolute是絕對定位，元素的位置會相對于已定位的最近父元素進行調整；fixed是固定定位，元素的位置在瀏覽器窗口內固定不動。

自適應則可以通過CSS的媒體查詢實現。媒體查詢通過檢查設備的寬度和高度，可以根據不同的寬度區間，應用不同的CSS樣式來控制不同尺寸的設備顯示效果，使網頁在不同分辨率的設備上都能夠呈現良好的布局。

/*舉個例子，如果我們想讓在手機屏幕下，導航欄不顯示文字，僅顯示圖標*/
@media screen and (max-width: 480px) {
.nav-item {
text-indent: -9999px;
}
}

這里使用@media規則指定在屏幕寬度小于480像素的情況下將.nav-item元素的文字隱藏，這樣就可以使導航欄在手機屏幕中只顯示圖標。