首頁 > web前端 > css教學 > 主體

深入解析CSS中的絕對定位,徹底理解它!

青灯夜游
發布: 2021-09-27 10:20:18
轉載
2659 人瀏覽過

這篇文章給大家解析一下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 : 0left: 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中的絕對定位,徹底理解它!

深入解析CSS中的絕對定位,徹底理解它!

.box-4  絕對定位,.box-2.box-3  相對定位

原文網址:https://juejin.cn/post/7008462323316686862

#作者:M酷

#更多程式設計相關知識,請造訪:

程式設計入門! !

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

相關標籤:
來源:掘金--M酷
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!