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 追蹤
在創作的路上真的很多人問我說
到底要怎麼做出符合自己期待
但又可以表現得很有美感的作品？🥹
這個問題真的應該是每個創作者都一直在學習的課題吧！
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
在創作的路上真的很多人問我說
到底要怎麼做出符合自己期待
但又可以表現得很有美感的作品？🥹
這個問題真的應該是每個創作者都一直在學習的課題吧！
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。