資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究CSS 中的 `position: sticky` 和 `position: fixed` 有什麼區別？
在 CSS 中，`position` 屬性用於設定 HTML 元素在視口中的位置。它可以取值如 `fixed`、`sticky`、`static`、`absolute`、`relative` 等。
在本教程中，我們將學習 `position: fixed` 和 `position: sticky` 之間的區別。
什麼是 CSS 中的 `position: fixed`？
`position` 屬性的 `fixed` 值用於將任何元素設定在 HTML 視口中固定位置。當我們為任何 HTML 元素設定固定位置時，它會脫離文件流。它根據視口設定位置，即使我們將 HTML 元素新增到網頁底部 div 元素的內部。
此外，開發人員可以使用 `top`、`left`、`bottom` 和 `right` CSS 屬性，結合 `position: fixed` 來設定 HTML 元素相對於視口的位置。
語法
使用者可以按照以下語法使用 `position: fixed` CSS 屬性。
Position: fixed;
示例 1
在下面的示例中，我們有一個可滾動的 div 元素，其中包含關於 CSS 的文字。我們還在 div 元素中添加了 Facebook 圖示。對於影像，我們設定了 `fixed` 位置並使用 `top` 和 `left` 屬性來設定頂部和左側位置。
在輸出中，使用者可以看到 Facebook 圖示的固定位置。
<html>
<head>
<style>
.text {
width: 500px;
height: 200px;
overflow: auto;
background-color: aqua;
font-size: 1.25rem;
}
img {
position: fixed;
left: 20px;
top: 130px;
height: 70px;
width: 70px;
}
</style>
</head>
<body>
<h3>Using the <i> position: fixed </i> in CSS to set a fixed position for an HTML element</h3>
<div class = "text">
CSS is a language for style sheets that are utilized to define how a document, typically in HTML, should be presented. CSS, alongside HTML and JavaScript, is a vital technology for the World Wide Web.
<img src = "https://png.pngtree.com/png-vector/20221018/ourmid/pngtree-facebook-social-media-icon-png-image_6315968.png" alt = "Facebook icon">
</div>
</body>
</html>
什麼是 CSS 中的 `position: sticky`？
`position: sticky` 與 `position: fixed` 非常相似，但有一點細微的差別。當我們將 `sticky` 位置應用於 HTML 元素時，它根據父元素設定固定位置，而不是像 `fixed` 位置那樣相對於視口設定位置。
因此，當我們滾動父元素並且具有 `sticky` 位置的 HTML 元素達到偏移量時，它就會固定。
語法
使用者可以按照以下語法在 CSS 中使用 `position: sticky`。
position: sticky
示例 2
在下面的示例中，我們添加了一些 div 元素文字。之後，我們添加了 Facebook 圖示，然後再次添加了文字。我們的 div 元素是可滾動的，我們為影像元素設定了 `sticky` 位置。
在輸出中，使用者可以觀察到，當他們滾動 div 元素並且影像距離 div 元素頂部 30 畫素時，它會固定。
<html>
<head>
<style>
.text {
width: 500px;
height: 200px;
overflow: auto;
background-color: pink;
font-size: 1.4rem;
}
img {
position: sticky;
left: 0px;
top: 30px;
height: 70px;
width: 70px;
}
</style>
</head>
<body>
<h2>Using the <i> position: sticky </i> in CSS to set a sticky position for an HTML element</h2>
<div class = "text">
This text is above the image. This text is above the image. This text is above the image <br>
<img src = "https://png.pngtree.com/png-vector/20221018/ourmid/pngtree-facebook-social-media-icon-png-image_6315968.png" alt = "Facebook icon">
This text is below the image. This text is below the image. This text is below the image.
</div>
</body>
</html>
`position: fixed` 和 `position: sticky` 之間有什麼區別？
以下是 `position: fixed` 和 `position: sticky` 的區別表。
| 屬性 | `position: fixed` | `position: sticky` |
|---|---|---|
| 元素位置 | 它根據 HTML 視口設定元素位置。 | 它根據父元素設定元素位置。 |
| 滾動位置 | 即使我們滾動或不滾動文件，它也始終保持固定。 | 只有當元素在滾動父元素時達到偏移量時，它才會固定。 |
| 覆蓋其他元素 | 它始終覆蓋其他元素。 | 當元素達到偏移量並固定時，它才會覆蓋其他元素。 |
| 瀏覽器支援 | 所有瀏覽器都支援它。 | 只有現代瀏覽器支援它。 |
| 用途 | 固定位置的一種用例是在側邊欄中新增社交媒體圖示。 | 它可以用來顯示粘性廣告。 |
示例 3
在下面的示例中，當用戶點選“設定粘性”按鈕時，它會為影像設定粘性位置；當用戶點選“設定固定”按鈕時，它會為影像元素設定固定位置。
在輸出中，使用者可以透過點選按鈕更改位置來觀察固定位置和粘性位置之間的區別。
<html>
<head>
<style>
.parent {
width: 400px;
height: 300px;
overflow: auto;
background-color: green;
color: white;
font-size: 2rem;
}
img {
position: fixed;
left: 0px;
top: 50px;
height: 70px;
width: 70px;
}
</style>
</head>
<body>
<h2>Using the <i> position: sitcky and postion: fixed </i> in CSS</h2>
<div class = "parent">
Nature is the physical world and everything in it, including plants, animals, landscapes, and natural phenomena.
It is a source of beauty, inspiration, and wonder, and provides vital resources for our survival.
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5E6WD3gFcs5kuTU6SX7VHO3YfghVscOwxOxdzEmrvfg&s"
alt = "Nature">
Despite its immense power and diversity, nature is also fragile and requires careful stewardship to ensure its continued health and sustainability.
</div><br>
<button onclick = "setSticky()"> set sticky </button> <br> <br>
<button onclick = "setFixed()"> set fixed </button>
<script>
function setSticky() {
document.querySelector("img").style.position = "sticky";
}
function setFixed() {
document.querySelector("img").style.position = "fixed";
}
</script>
</body>
</html>
使用者學習了 `position: fixed` 和 `position: sticky` 之間的區別。主要區別在於，`fixed` 位置根據視口設定 HTML 元素的位置，而 `sticky` 位置根據父元素設定位置。
12K+ 次瀏覽
