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 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。