如何嵌套具有相对定位和绝对定位的css盒

Question

说我有三个盒子可以筑巢。 A，B和C.我想让它们以C所在的方式嵌套，但是相对于B，B的位置位于相对于A的位置，但相对于浏览器的A位置。我理解在常见的情况下，我只需要嵌套其中两个，比如A中的B，我可以做A位置：相对和B位置：绝对。通过这种方式，我将框B嵌入A中并调整其在A区域内的位置。但是在三箱（甚至更多）的情况下，我怎样才能以这种方式放置它们？

图片中。我期望的效果如下。因此B限于A内的区域，C限制在B区域内

Answer 1

在外部父级上使用position:relative; - 在您的情况下使用A.

然后使用position:absolute放置所有其他div，并使用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;
}

Answer 2

通过设置绝对位置，将其定位到最接近的父位置。

来自MDN的

：

  

将其放置在相对于其最近位置祖先的指定位置

表示如果“A”和“B”设置为绝对值，则“A”设置为相对值 和“B”在你的例子中设置为绝对。

Answer 3

它可以使用CSS calc来构建：

Example codesandbox.io

HTML

<div id="div1" class="div1 borderBackgr_1" onClick="handleEvent('div1')">
  div1
  <div id="div2" class="div2 borderBackgr_2" onclick="handleEvent_1('div2')">
    div2
    <div id="div3" class="div3 borderBackgr_3">
      div3
    </div>
  </div>
</div>

CSS

.div1 {
  text-align: center;
  position: relative;
  margin: 1em auto;
  width: 25em;
  height: 20em;
}

.div2 {
  text-align: center;
  position: absolute;
  left: calc((100% - 20em) / 2);
  top: calc((100% - 15em) / 2);
  width: 20em;
  height: 15em;
}

.div3 {
  text-align: center;
  position: absolute;
  left: calc((100% - 15em) / 2);
  top: calc((100% - 10em) / 2);
  width: 15em;
  height: 10em;
}

.borderBackgr_1 {
  border: solid 1px black;
  background: pink;
}

.borderBackgr_2 {
  border: solid 1px blueviolet;
  background: silver;
}

.borderBackgr_3 {
  border: solid 1px green;
  background: orange;
}