CSS-position
閱讀時間約 3 分鐘
今天來介紹一下比較常用的4種定位方式
其中讓我最搞混的是relative跟absolute
position: relative
在尚未設定top、bottom、left、right屬性時，看起來是static。然而，一旦設定了這些屬性，relative定位將會相對於元素原先的位置進行調整。
position: absolute
將一個元素的位置屬性設為 absolute 時，他會往外去找 position 不是 static 的層當參照點進行定位，若無則相對於整個網頁。這樣可以精確控制元素的位置，而不受其他元素的影響。
position: fixed
其參考點為 viewport 元素。你可以使用top、bottom、left、right這些屬性來指定元素的確切位置，他的作用就是不管你畫面滑到哪裡他都會在你的視窗。
position: sticky
其的參考點是離他最近的父元素，跟fixed有點像，不一樣的是sticky一開始不會出現，而是要捲動到此元素超過該畫面時，sticky 才會有作用把這個元素固定在畫面。
<body>
<div class="container">
<div class="static-box">static Box</div>
<div class="relative-box">Relative Box 是以container為基準 </div>
<div class="absolute-box">Absolute Box 是以container為基準</div>
<div class="fixed-box">Fixed Box 我是以BODY為基準</div>
<div class="sticky-box">Sticky Box</div>
</div>
</body>
body {
margin: 0;
font-family: Arial, sans-serif;
width: 50vw;
border: 3px green solid;
margin-left: 5rem;
}
.container {
width: 1200px;
height: 1200px;
background-color: #f0f0f0;
border: 2px solid #000;
position: relative;
left: 80px;
}
.static-box {
border: 2px solid orange;
width: 70px;
}
.relative-box {
position: relative;
top: 10px;
left: 20px;
border: 2px solid red;
width: 242px;
}
.absolute-box {
position: absolute;
top: 90px;
left: 150px;
border: 2px solid blue;
}
.fixed-box {
position: fixed;
top: 0px;
left: 0px;
background-color: #9999ff;
}
.sticky-box {
position: sticky;
top: 500px;
background-color: #ffff99;
padding: 10px;
margin-bottom: 400px;
}
可以看看會更清楚!!
3會員
17內容數
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本文將介紹 CSS 中的position屬性，position是用於控制網頁元素在頁面上的排列，接下來將逐一介紹position屬性的五種不同值：static, relative, absolute, fixed, 和 sticky，以及它們如何影響元素的排列。
製作校長盃 UI 設計首獎作品：實作元件切版過程中因為不夠了解Position的屬性而造成在對content內容排版一直跑掉，一開始想都使用Position來實作所有的排版，但是Position的absolute與fixed屬性在使用時元件將不再佔有一排，而下面的元件會自動向上遞補，就造成了排版
不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本文將介紹 CSS 中的position屬性，position是用於控制網頁元素在頁面上的排列，接下來將逐一介紹position屬性的五種不同值：static, relative, absolute, fixed, 和 sticky，以及它們如何影響元素的排列。
製作校長盃 UI 設計首獎作品：實作元件切版過程中因為不夠了解Position的屬性而造成在對content內容排版一直跑掉，一開始想都使用Position來實作所有的排版，但是Position的absolute與fixed屬性在使用時元件將不再佔有一排，而下面的元件會自動向上遞補，就造成了排版
不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。