CSS - 定位

目錄

CSS 定位是什麼？

你好，未來的 CSS 大師們！今天，我們將深入 CSS 定位的精彩世界。作為你們親切鄰居的電腦老師，我會一步步引導你們。相信我，這堂課結束時，你們將能像專業人士一樣定位元素！

CSS 定位就像在房間裡排列家具。正如你決定放置沙發或書架的位置，CSS 定位讓你可以控制元素在網頁上的出現位置。這是一個強大的工具，可以將你的靜態設計轉化為動態佈局。

語法

在我們深入了解不同類型的定位之前，讓我們先快速看一下基本語法：

選擇器 {
position: 值;
}

在這裡，選擇器 是你想要定位的 HTML 元素，值 是你想要應用的定位類型。簡單吧？現在，讓我們詳細探索每種定位類型。

靜態定位元素

靜態定位是每個元素的默認設定。它就像桌面遊戲的起點——所有棋子在遊戲開始前都在這裡。

div {
position: static;
}

使用靜態定位，元素會自然地在文檔中流動。它們不會受到 top、bottom、left 或 right 屬性的影響。這是元素行為的“正常”方式。

相對定位元素

相對定位就像告訴元素：“從你正常會在的位置移動一點。”它對於在不干擾其他元素流動的情況下進行小調整非常有用。

.box {
position: relative;
top: 20px;
left: 30px;
}

在這個例子中，我們的 .box 元素將從其正常位置向下移動 20 像素，向右移動 30 像素。記住，其他元素會像我們的盒子沒有移動一樣繼續行為！

絕對定位元素

絕對定位是 CSS 世界中的反叛者。它脫離了正常的文檔流，並相對於最近的定位祖先（如果沒有定位祖先存在，則相對於初始包含區塊）定位自己。

.absolute-box {
position: absolute;
top: 50px;
right: 30px;
}

這個 .absolute-box 將被定位在其最近的定位祖先的顶部 50 像素和右部 30 像素的位置。這就像給元素裝上了一個噴射背包——它可以在頁面上的任何地方飛行！

固定定位元素

固定定位就像把一張便箋貼在電腦屏幕上。無論你如何滾動，它都會停留在原地。

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

這段代碼創建了一個導航欄，即使你向下滾動頁面，它也會停留在屏幕的頂部。這對於導航菜單或你希望用戶始終看到的重耍信息非常完美。

粘性定位元素

粘性定位是 CSS 定位中的變色龍。它在元素達到指定的閾值之前表現得像 relative 定位，然後它變成 fixed。

.sticky-header {
position: sticky;
top: 0;
}

這創建了一個在頁面上正常滾動的頭部，直到它達到頂部，然後在繼續滾動時停留在那裡。這就像是網頁上的魔術！

在圖像中定位文字

現在，讓我們結合我們的定位技巧來創造一些酷炫的東西——在圖像上方定位文字：

<div class="image-container">
<img src="landscape.jpg" alt="美麗風景">
<p class="image-text">大自然的美麗</p>
</div>

.image-container {
position: relative;
}

.image-text {
position: absolute;
bottom: 20px;
right: 20px;
color: white;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

這段代碼將文字定位在圖像的右下角。文字陰影增加了不少，使其在不同的背景上可讀。

CSS 定位相關屬性

讓我們以一個與 CSS 定位相關的重要屬性表結束：

屬性	描述	示例
top	設置頂部邊緣位置	top: 10px;
bottom	設置底部邊緣位置	bottom: 20%;
left	設置左部邊緣位置	left: 5em;
right	設置右部邊緣位置	right: 15vw;
z-index	控制堆疊順序	z-index: 100;

記住，這些屬性根據你使用的定位方法有不同的工作方式。試著用它們來創造令人興奮的佈局！

這就是了，我親愛的學生們！我們一起穿越了 CSS 定位的世界。從靜態到粘性，我們涵蓋了所有內容。記住，熟能生巧，所以不要害怕嘗試這些技巧。在你意識到之前，你將能夠創建有經驗開發者都會驚嘆的網頁佈局。現在，勇往直前，自信地定位那些元素。並且永遠記住——在 CSS 的世界中，沒有“位置不當”這回事！

Credits: Image by storyset