CSS - 底部屬性：精通元素定位
你好，未來的 CSS 巔峰大師！今天，我們將要深入 CSS bottom 屬性的迷人世界。作為你親切友善的鄰居計算機科學老師，我將帶領你一步一步地走過這段旅程。所以，拿起你喜歡的飲料，舒適地坐好，讓我們一起踏上這個刺激的冒險！
CSS bottom 屬性是什麼？
在我們深入細節之前，讓我們從基礎開始。CSS bottom 屬性就像一根魔法棒，讓你可以從容器的底部定位元素。它是 CSS 定位工具包的一部分，與 top、left 和 right 屬性一起工作。
把它想成是給你的 HTML 元素一組坐標，告訴它們在網頁上的精確位置。這就像玩數字俄羅斯方塊遊戲，但不是下落的方塊，而是在排列網頁元素！
可能的值
現在，讓我們看看 bottom 屬性能夠接受的不同的值。這就像從定位選項的菜單中選擇：
| 值 | 描述 |
|---|---|
| auto | 瀏覽器計算底部位置 |
| 長度 | 指定底部位置的像素、點、厘米等 |
| % | 指定容器底部位置的百分比 |
| inherit | 從父元素繼承值 |
| initial | 將此屬性設置為其默認值 |
讓我們通過一些代碼示例來看看這些值的作用：
/* 使用像素值 */
.box1 {
bottom: 20px;
}
/* 使用百分比 */
.box2 {
bottom: 10%;
}
/* 使用 'auto' */
.box3 {
bottom: auto;
}在以上示例中，box1 將從底部定位 20 像素，box2 將是其容器的底部 10%，而 box3 將讓瀏覽器決定其底部位置。
適用範圍
bottom 屬性不是一個萬能解決方案。它只在具有指定位置值的元素上發揮魔法。讓我們看看它應用於哪些定位類型：
- 絕對
- 相對
- 固定
- 粘性
我們將詳細探索這些類型。但記住，bottom 不影響靜態定位的元素（默認定位）。
DOM 語法
對於那些喜歡用 JavaScript 來親自動手的同學，這裡是如何使用文檔對象模型（DOM）操作 bottom 屬性的方法：
object.style.bottom = "20px"這行代碼將元素的 bottom 屬性設置為 20 像素。就像從底部給你的元素一個小小的推動！
CSS bottom - 絕對定位
現在，讓我們深入不同的定位類型，從絕對定位開始。當元素被絕對定位時，它會從正常的文檔流中移除，並相對於最近的定位祖先元素定位。
.parent {
position: relative;
height: 200px;
background-color: #f0f0f0;
}
.child {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #ff9900;
padding: 10px;
}<div class="parent">
<div class="child">我絕對定位了！</div>
</div>在這個例子中，子元素將從底部定位 20 像素，並從右側定位 20 像素。就像在網頁劇院的特定座位上給你的元素一個位置！
CSS bottom - 相對定位
相對定位有所不同。元素相對於其正常位置定位，其他元素會圍繞它調整。
.box {
position: relative;
bottom: 30px;
background-color: #00ff00;
padding: 10px;
}<div class="box">我相對定位了！</div>這個綠色方框將從其正常位置向上移動 30 像素。就像告訴你的元素，“稍微移動一下，但保持你在行中的位置！”
CSS bottom - 固定定位
固定定位就像給你的元素一個永久的 VIP 通行證。即使在頁面滾動時，它也會停留在同一個位置。
.header {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
color: white;
padding: 10px;
}<div class="header">我是一個固定底部！</div>這樣創建了一個粘貼在視口底部的底部，無論你滾動多少，都總是可見。這對於你想保持可訪問的重要信息或導航非常完美。
CSS bottom - 粘性定位
粘性定位是個新來的。它是相對定位和固定定位的混合體。元素被當作相對定位，直到它達到指定的閾值，然後它變成固定定位。
.sticky-note {
position: sticky;
bottom: 20px;
background-color: #ffff00;
padding: 10px;
}<div class="sticky-note">我是一個粘性筆記！</div>這個黃色的粘性筆記將隨頁面滾動，直到它距離視口底部 20 像素，然後它會粘在那裡。就像網頁上的數字便利貼！
CSS bottom - 靜態定位
最後但同樣重要的是，讓我們來談談靜態定位。這是所有元素的默認定位，但這裡有一個陷阱 - bottom 屬性對於靜態定位的元素沒有作用！
.static-box {
position: static;
bottom: 50px; /* 這將沒有作用 */
background-color: #ff00ff;
padding: 10px;
}<div class="static-box">我是靜態定位的！</div>在這個例子中，即使我們設置了 bottom 值，粉紅色方框也不會從其在文檔流中的正常位置移動。就像試圖移動一座山 - 它就是不會發生！
至此，各位！我們已經穿越了 CSS 定位的領地，探索了 bottom 屬性的所有榮耀。記住，精通 CSS 定位就像學習舞蹈 - 它需要練習，但一旦你掌握了節奏，你就可以創造出美麗、和諧的佈局，讓你的網頁歌唱！
繼續實驗，持續學習，最重要的是，享受其中的樂趣。畢竟，網頁開發既是科學，也是藝術。祝各位未來的 CSS 大師編程愉快！
Credits: Image by storyset