爲什麼CSS位置絕對錶現得像相對於它的子元素絕對

我有一個結構simmiliar這樣的：爲什麼CSS位置絕對錶現得像相對於它的子元素絕對

<div style="border: 1px solid red; position: relative; height: 200px"> 
     <div style="border: 1px solid green; position: absolute; left: 10px; top: 10px;height: 100px; width: 200px "> 
      <div style="border: 1px solid blue; position: absolute; top: 15px; 10px; height: 20px; width: 20px;"> 

      </div> 
     </div> 
    </div>

在這個例子中第3格需要第二格是相對的。我一直認爲你的位置最接近relative元素，而不是最接近的absolute元素。
它爲什麼會這樣？我在最近的變化中錯過了什麼嗎？

來源

2017-02-20 Grzegorz

你認爲這是錯誤的，它使用了絕對或相對的第一個父/祖先節點。查看http://stackoverflow.com/questions/13867717/how-to-make-divs-percentage-width-relative-to-parent-div-and-not-viewport/13867800#13867800 –

AFAIK，它一直是這樣。從[MDN在'position'上的頁面]（https://developer.mozilla.org/en-US/docs/Web/CSS/position）：「**'absolute' **：...將它定位在指定位置相對於其*最接近定位祖先*的位置（如果有的話），或者相對於初始含有塊。（強調我的） –

當你絕對定位它的位置時，它的位置與它的*最接近的位置*位置**祖先* – j08691

從MDN：

絕對

不要爲元素留出空間。相反，將其定位在相對於其最接近定位祖先（如果有的話）的指定位置或其他相對於初始包含塊的位置。絕對地定位框可以有邊距，並且它們不會與任何其他邊緣摺疊。

從W3C：

在絕對定位模型中，一個盒子被明確地相對於它的包含塊的偏移量。

哪個進一步導致

Definition of containing block

如果元件具有position: absolute，含塊通過與靜態以外的位置最近的祖先建立的。

所以你的絕對元素總是相對於祖先的位置，除非它是一個靜態定位元素。

來源

2017-02-20 20:41:31

絕對元素位置到最近的positioned parent element，而不是兒童。

編輯：實際上，絕對元素位置以最近的元素定位在任何方式，但靜態。你絕對不會有絕對的內在絕對，絕對的內在絕對是絕對的，這就是爲什麼這是一個常見的誤解。

來源

2017-02-20 20:45:11

我知道，但不知道它也是最接近絕對元素的位置。 – Grzegorz

爲什麼CSS位置絕對錶現得像相對於它的子元素絕對

回答

相關問題