如何用相对定位和绝对定位嵌套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框

回答

相关问题