201204021722CSS position : absolute 、 relative 的 top left bottom right 座標原點

初學 CSS 的人,常常卡在這裡,這些年來也被問了不少次,寫文記錄一下。

position : absolute 」元件的 CSS top 、 left 、 bottom 、 right 座標原點,是由目前元件延著 DOM Tree 往上找,找到第一個有「 position : relative 」或「 position : absolute 」元件的左上角。如果沒有元件有「 position : relative 」或「 position : absolute 」,則以 <body> 的左上角為原點。

「 position : relative 」則是以元件本身的左上角做為 top 、 left 、 bottom 、 right 的座標原點。更多時候,加上「 position : relative 」,不是為了要位移元件本身,而是為了作為元件內有「 position : absolute 」子元件的座標原點。

簡單用下面兩個範例說明:

<body>
<div id="div1" >
  <div id="div2" style="position : relative" >
    <div id="div3" >
      <div id="div4" style="position : absolute" >
        <div id="div5" >
          <div id="div6" style="position : absolute" ></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

#div6 的座標原點是 #div4 的左上角, #div4 的座標原點是 #div2 的左上角, #div2 的座標原點是 #div2 本身的左上角。

 

<body>
<div id="div1" >
  <div id="div2" >
    <div id="div3" >
      <div id="div4" >
        <div id="div5" >
          <div id="div6" style="position : absolute" ></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

#div6 的座標原點是 <body> 的左上角。

 

這裡寫的是 CSS top 、 left 、 bottom 、 right 的座標原點, CSS z-index 的比較依據請參考 The stacking context - MDN

延伸
回應
Google 站內搜尋
BloggerAds
累積 | 今日
loading......
    沒有新回應!





Powered by Xuite