CSS 定位：你認為你到底要去哪裡？

✨
本文是我自己的網站上提供的更大系列文章的一部分。按此處了解有關 CSS 101：系列的更多資訊。完全免費！

歡迎來到 CSS 定位的神奇領域，在這裡您可以為您的 Web 元素扮演架構師和設計師的角色！如果您想知道如何將該按鈕準確地放置在您想要的位置，或者如何確保標題不會偏離，那麼您來對地方了。讓我們以一點智慧和一點樂趣來深入了解 CSS 定位的基礎知識。

1. 靜態定位：預設設定

靜態定位就像電視上的預設設定。沒有什麼花俏的，只是基本和簡單。預設情況下，所有元素都是靜態定位的；這意味著它們按照您的預期在文件中流動 - 一個接一個。

div {
    position: static;
}

當您使用position: static;時，您實際上是在告訴瀏覽器將元素放置在其正常位置，就像自然的那樣。這就是「這裡沒什麼好看的」的定位。

2. 相對定位：稍微狡猾的朋友

相對定位就像有一個總是有點格格不入但又充滿魅力的朋友。它可以讓您相對於正常位置移動元素，而不會幹擾頁面的其餘部分。

.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}

這裡，.relative-box 將從其 原始 位置向下移動 10 像素，向右移動 20 像素。它周圍的其餘元素仍將位於原來的位置。

3. 絕對定位：自由追求者

絕對定位就像你的愛冒險的朋友，不隨波逐流。它可以讓您將元素定位在您想要的任何位置，相對於最近的「非靜態」祖先（即位置為：相對、絕對、固定或黏性的祖先）。

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 30px;
    right: 10px;
}

在此範例中，.child 將位於距 .parent 頂部 30 像素、距右側 10 像素的位置。如果 .parent 不存在，它將相對於最近定位的祖先或視窗進行定位。

專業提示？
當元素絕對定位在應用了變換的父級內部時，它是相對於變換後的父級定位的，而不是相對於原始文檔流定位的。請注意此行為，以避免意外的佈局變更和定位問題。

4. 固定定位：頑固的靜電

固定位置就像擁有一張你最喜歡的椅子，永遠不會移動。它允許您相對於視口定位元素，因此無論您滾動多少，它都會保持在同一位置。

.floating-action-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

使用位置：固定；，即使向下滾動，.floating-action-button 也將保持距視窗底部 20 像素和距視口右側 20 像素的距離。它非常適合那些黏性元素，例如網站標題、聊天小部件或持久的號召性用語按鈕。

5. 黏性定位：兩全其美

黏性定位就像有一個總是部分出現在聚光燈下或部分不在聚光燈下的朋友。您可以將其視為相對定位和固定定位的混合體。當您捲動經過某個點時，具有position:sticky的元素將堅持其在其容器內的位置，但在其他方面的行為類似於相對定位的元素。

.sticky-box {
    position: sticky;
    top: 0;
}

在此範例中，一旦您滾動經過 .sticky-box，它就會粘在其容器的頂部，並在您繼續滾動時保持在那裡，但前提是容器處於視圖中。當容器滾動到視圖之外時，黏性元素將隨之滾動。對於您希望在頁面的特定部分中保持可見的標題、導覽功能表或側邊欄來說，它非常有用。

Z-Index：優勝者

啊，z-index！這就是事情變得有點競爭的地方。當元素重疊時，z-index 決定哪一個位於頂部。這就像一場高中人氣競賽，只不過是針對您的網路元素。

.box1 {
    position: absolute;
    z-index: 10;
}

.box2 {
    position: absolute;
    z-index: 5;
}

在這種情況下，.box1 將出現在 .box2 上方，因為它具有更高的 z-index。請記住，z-index 僅適用於定位元素（相對、絕對、固定或黏性）。

專業提示？
z-index 的意思比上面解釋的還要多。請繼續關注「堆疊上下文」的深入研究，這將使您更全面地了解 z-index 在複雜佈局中的工作原理。

總結一下

CSS 定位可能看起來像一個謎題，但一旦掌握了它的竅​​門，您就能精確而巧妙地放置元素。每種職位類型在網頁設計上都有其特殊的功能。試試一下，看看如何讓您的網頁看起來恰到好處。

編碼愉快！

✨
噓！如果您喜歡所讀內容，您應該點擊此處查看 CSS 101：系列。完全免費！

以上是CSS 定位：你認為你到底要去哪裡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！