✨
本文是我自己的網站上提供的更大系列文章的一部分。按此處了解有關 CSS 101：系列的更多資訊。完全免費！
歡迎來到 CSS 定位的神奇王國，在這裡您可以為您的網頁元素扮演架構師和設計師的角色！如果您想知道如何將該按鈕準確地放置在您想要的位置，或者如何確保標題不會偏離，那麼您來對地方了。讓我們以一點智慧和一點樂趣來深入了解 CSS 定位的基礎知識。
靜態定位就像電視上的預設設定。沒有什麼花俏的，只是基本和簡單。預設情況下，所有元素都是靜態定位的；這意味著它們按照您的預期在文件中流動 - 一個接一個。
當您使用position: static;時，您實際上是在告訴瀏覽器將元素放置在其正常位置，就像自然的那樣。這就是定位的「這裡沒什麼好看的」
相對定位就像有一個總是有點格格不入但又充滿魅力的朋友。它可以讓您相對於正常位置移動元素，而不會幹擾頁面的其餘部分。
這裡，.relative-box 將從 original 位置向下移動 10 像素，向右移動 20 像素。周圍的其餘元素仍會在原來的位置。
絕對定位就像你的愛冒險的朋友，不隨波逐流。它可以讓您將元素定位在您想要的任何位置，相對於最近的「非靜態」祖先（即位置為：相對、絕對、固定或黏性的祖先）。
在此範例中，.child 將位於距 .parent 頂部 30 像素、距右側 10 像素的位置。如果 .parent 不存在，它將相對於最近定位的祖先或視窗進行定位。
專業提示?
當元素絕對定位在應用了變換的父級內部時，它是相對於變換後的父級定位的，而不是相對於原始文檔流定位的。請注意這種行為，以避免意外的佈局變更和定位問題。
固定位置就像擁有一張你最喜歡的椅子，永遠不會移動。它允許您相對於視口定位元素，因此無論您滾動多少，它都會保持在同一位置。
使用位置：固定；，即使向下滾動，.floating-action-button 也將保持距視口底部 20 像素和距視口右側 20 像素的距離。它非常適合那些黏性元素，例如網站標題、聊天小部件或持久的號召性用語按鈕。
黏性定位就像有一個總是部分出現在聚光燈下或部分不在聚光燈下的朋友。您可以將其視為相對定位和固定定位之間的混合體。當您捲動經過某個點時，具有position: Sticky 的元素會黏在其容器內的位置，但在其他情況下，其行為就像相對定位的元素。
在此範例中，一旦您滾動經過 .sticky-box，它就會粘在其容器的頂部，並在您繼續滾動時保持在那裡，但前提是容器處於視圖中。當容器滾動到視圖之外時，黏性元素將隨之滾動。對於您希望在頁面的特定部分中保持可見的標題、導覽功能表或側邊欄來說，它非常有用。
啊，z-index！這就是事情變得有點競爭的地方。當元素重疊時，z-index 決定哪一個位於頂部。就像高中人氣大賽，不過是為了你的網頁元素。
在這種情況下，.box1 將出現在 .box2 上方，因為它具有更高的 z-index。請記住，z-index 僅適用於定位元素（相對、絕對、固定或黏性）。
專業提示?
z-index 的意思比上面解釋的還要多。請繼續關注「堆疊上下文」的深入研究，這將使您更全面地了解 z-index 在複雜佈局中的工作原理。
CSS の配置はパズルのように思えるかもしれませんが、コツを掴めば、要素を正確かつ巧みに配置できるようになります。各ポジションタイプには、Web デザインにおける独自の特別な役割があります。これらを試してみて、Web ページを適切に見せる方法を確認してください。
コーディングを楽しんでください!
✨
くっそー！読んだ内容が気に入ったら、ここをクリックして CSS 101: The Series をチェックアウトしてください。完全に無料です!
以上是CSS 定位：你認為你到底要去哪裡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
