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;
}
可以看看會更清楚!!
2會員
14內容數
留言0
查看全部
你可能也想看
創作者要怎麼好好休息 + 避免工作過量？《黑貓創作報#4》午安，最近累不累？
這篇不是虛假的關心。而是《黑貓創作報》發行以來可能最重要的一篇。
是的，我們這篇講怎麼補充能量，也就是怎麼休息。
2024-06-29
CSS 程式札記 : 變量(Variables)在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
2024-02-18
CSS 程式札記 : 背景 background背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
2024-01-25
CSS 程式札記 : 字型與文本如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
2024-01-22
CSS 程式札記 : position 定位本文將介紹 CSS 中的position屬性，position是用於控制網頁元素在頁面上的排列，接下來將逐一介紹position屬性的五種不同值：static, relative, absolute, fixed, 和 sticky，以及它們如何影響元素的排列。
2023-07-31
Css Position功能誤解與Box Model應用 製作校長盃 UI 設計首獎作品：實作元件切版過程中因為不夠了解Position的屬性而造成在對content內容排版一直跑掉，一開始想都使用Position來實作所有的排版，但是Position的absolute與fixed屬性在使用時元件將不再佔有一排，而下面的元件會自動向上遞補，就造成了排版
2023-06-08
【CSS 教學】position 系列語法彙整，絕對、相對定位的開發、除錯技巧不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。
2021-12-05