相對定位內的絕對定位？

根據W3Schools的（http://www.w3schools.com/css/css_positioning.asp）：相對定位內的絕對定位？

相對定位元件被經常用作絕對定位元素容器塊。

這是爲什麼？有一個很好的例子嗎？

來源

2013-08-16 More Than Five

一個很好的例子是當你想定位一些東西到頁面或「相對」的容器/格。

這裏是我的小提琴http://jsfiddle.net/doitlikejustin/RdWQ7/2/

這說明你，沒有絕對的div是一個「相對」 div中，內容被排列到文檔體。

注意，綠色DIV（#box1），其具有position: relative，內部（#inner1）在div它對齊頂部/右INSIDE的#box1。

藍框（#box2），它具有完全相同的HTML佈局的綠框（#box1），不包括position: relative並注意內部的div（#inner2）對齊到body頂/右

#box1, #box2 { 
    width: 100px; 
    height: 100px; 
    color: white; 
    text-align: center; 
    line-height: 100px; 
} 
#box1 { 
    background: green; 
    position: relative; 
} 
#box2 { 
    background: blue; 
} 

#inner1, #inner2 { 
    width: 50px; 
    height: 50px; 
    top: 0; 
    right: 0; 
    position: absolute; 
    background: black; 
    opacity: 0.5; 
    color: white; 
    text-align: center; 
    line-height: 50px; 
}

這裏是克里斯Coyier它一個很好的文章...

相對POSI頁面元素讓你可以控制絕對位置的孩子元素。

來源：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

來源

2013-08-16 23:23:33 doitlikejustin

謝謝。但它並沒有完全回答這個問題。內部div的位置相對於沒有靜態默認位置的第一個父div。所以，如果我們使box2具有絕對位置，我們會得到與相對相同的結果。這引出了一個問題，那就是父母div是相對特殊的東西嗎？謝謝 –

@MoreThanFive你可以做到這一點，但現在你的'＃box2' div會移動到身體內部，就好像它現在是'＃inner2'一樣。這裏是一個例子http://jsfiddle.net/doitlikejustin/RdWQ7/3/我增加了'正確'，所以你可以看到他們是如何不同。 – doitlikejustin

我明白你的意思了。 –

，如果絕對定位的元素是不是在一個相對的元素，然後在設置上，左，右，或機器人具有價值，這將偏離絕對位置元素身體的價值。這是什麼意思？例如，如果您將絕對位置元素的屬性top設置爲10px，則會將元素從屏幕頂部推出10個像素。

如果絕對位置元素位於相對元素中，那麼當您使用值設置頂部，左側，右側或機器人時，它會將該相對元素的絕對位置元素移動該值。這是什麼意思？例如，如果您將絕對位置元素的屬性top設置爲10px，則會將元素從相對元素的頂部推入10像素。在那裏你可以移動相對元素，絕對定位的元素在它的內部總是距離相對元素的頂部10個像素。

來源

2013-08-16 23:36:06

其他答案做什麼沒有明確的狀態是這樣的：

絕對定位是不具有靜態定位最近的祖先測出來。給祖先相對定位只是爲此目的的一種手段。它不一定是相對的，它不能是靜態的。

具有絕對位置的元素和

top：10px;

將距離位置不是靜態的最近祖先的頂部10個像素。

來源

2015-05-06 20:40:10

相對定位內的絕對定位？

回答

相關問題