如何用相對定位和絕對定位嵌套css框

說我有三個框來嵌套。 A，B和C.我想讓它們以C駐留的方式嵌套，但相對於B，B的位置駐留在相對於A的位置內，而A位置則相對於瀏覽器。我知道在一般情況下，我只需要嵌套其中的兩個，在A中說B，我可以使A位置：相對位置和B位置：絕對位置。通過這種方式，我將框B嵌入到A中，並調整其在A區域內的位置。但是在三盒（甚至更多）的情況下，我怎樣才能讓它們以這種方式放置？如何用相對定位和絕對定位嵌套css框

圖片中。我期望的效果如下。所以B是限制在一個範圍內的區域，和C是

enter image description here

來源

2013-08-22 Daniel

使用position:relative;在外父內B的面積的限制 - 在你的情況A.

然後用把所有其他的div position:absolute並使用top,bottom,left和right屬性設置偏移量。每個<div>將自動相對於其直接父級。 Working jsFiddle example

HTML：

<div id="a"> 
    <div id="b"> 
     <div id="c"></div> 
    </div> 
</div>

CSS：

#a{ 
    position:relative; 
    width:200px; 
    height:200px; 
    background:red; 
} 

#b{ 
    position:absolute; 
    top:75px; 
    left:100px; 
    background:cyan; 
    width:75px; 
    height:100px; 
} 

#c{ 
    position:absolute; 
    background:white; 
    top:10px; 
    left:10px; 
    width:40px; 
    height:40px; 
}

來源

2013-08-22 13:23:37

** [確切JSFiddle匹配他的圖像]（http://jsfiddle.net/sT6H6/1）** – crush

@crush謝謝，它更接近。這個想法是一樣的。 –

謝謝！它有助於 – Daniel

通過設置位置是絕對的，你就定位到最近的定位的父。

從MDN：在相對於其最接近的定位的祖先中的指定位置

位置它

這意味着如果「A」和「B」設置爲絕對的，它的相同「A」設置爲相對的，「B」設置爲絕對值，就像在你的例子中一樣。

來源

2013-08-22 13:30:32 Tomzan

如何用相對定位和絕對定位嵌套css框

回答

相關問題