深入解析CSS中的絕對定位，徹底理解它！-css教學-PHP中文網

首頁

web前端

css教學

深入解析CSS中的絕對定位，徹底理解它！

青灯夜游

Sep 17, 2021 am 11:21 AM

css絕對定位

這篇文章給大家解析一下CSS中的絕對定位，帶大家徹底理解它，希望對大家有幫助！

深入解析CSS中的絕對定位，徹底理解它！

與其說定位一個元素是定位元素本身的位置，不如說是元素的容器位置。為了能夠定位自己，它必須知道自己將相對於哪個父親div 來定位。【相關建議：《css影片教學》】

下面的程式碼展示了4個巢狀的div ， .box-1 到.box -3 僅透過display: flex 和 margin: auto 來實現居中。 .box-4 沒有設定 margin ，在文件流程中預設的位置。

<body>
  <div class="box-1">
    <div class="box-2">
      <div class="box-3">
        <div class="box-4"></div>
      </div>
    </div>
  </div>
</body>

所有元素都沒有設定position 屬性

body {
  display: flex;
}
.box-1,
.box-2,
.box-3 {
  display: flex;
  margin: auto;
}

深入解析CSS中的絕對定位，徹底理解它！

##.box-4 在預設位置

元素要想定位自己，必須知道2件事：

top, right, bottom, left 設定的值

當我們給

.box-4 新增position: absolute 屬性後，發現它從普通文件流中脫離出來了。在沒有設定位置屬性的情況下，它只是待在預設位置，也就是父容器的左上角。

深入解析CSS中的絕對定位，徹底理解它！

.box-4 絕對定位時位置無偏移

透過新增

top : 0 和left: 0 ，元素必須要知道哪個元素將作為定位的參考容器。可以看到這裡元素被定位到了螢幕左上角。 .box-4 會先檢查它的父容器是否設定了 position 屬性。一開始，它發現.box-3 沒有設定定位屬性，然後它就繼續往上一層 .box-2 和.box-1 ,發現它們都沒有設定可用的position 屬性。

最終

.box-4 也沒能找到可以用來定位參考的父級元素，最後只能以 body 作為定位參考。元素最終被定位在螢幕左上角：

深入解析CSS中的絕對定位，徹底理解它！

.box-4 絕對定位，所有父元素都未設定 position 屬性

當我們給

.box-1 設定 position: relative 後, .box-4 發現有了可用的定位參考。並最終相對於.box-1 實現了定位：

深入解析CSS中的絕對定位，徹底理解它！

.box-4 絕對定位，.box-1 相對定位，.box-2 和.box-3 不變

絕對定位元素將相對於離它最近的祖先元素來定位自己。

一旦找到了可用的祖先元素，其它元素將不再與它相關（例如 box2 和 box3）。下面的圖片展示了分別給

.box-2 和.box-3 設定position:relative 之後的效果：

深入解析CSS中的絕對定位，徹底理解它！

.box-4 絕對定位，.box-2 和.box-3 相對定位

原文網址：https://juejin.cn/post/7008462323316686862
#作者：M酷

#更多程式設計相關知識，請造訪：

程式設計入門！！

以上是深入解析CSS中的絕對定位，徹底理解它！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金--M酷。如有侵權，請聯絡admin@php.cn刪除

@KeyFrames vs CSS過渡：有什麼區別？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用頁面CMS進行靜態站點內容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的內容管理系統選項可用，而我進行了幾個測試，但實際上沒有一個是一個，y＆＃039;知道嗎？怪異的定價模型，艱難的自定義，有些甚至最終成為整個＆

鏈接HTML中CSS文件的最終指南May 13, 2025 am 12:02 AM

鏈接CSS文件到HTML可以通過在HTML的部分使用元素實現。 1)使用標籤鏈接本地CSS文件。 2)多個CSS文件可通過添加多個標籤實現。 3)外部CSS文件使用絕對URL鏈接，如。 4)確保正確使用文件路徑和CSS文件加載順序，優化性能可使用CSS預處理器合併文件。

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles