CSS：父母不会以绝对的位置清除孩子

Question

所以我有3个盒子：

Box 1 = red
Box 2 = blue
Box 3 = yellow

Box 1 contains Box 2
Box 2 contains Box 3

Box3 are floated divs and have been cleared using extra div style="clear:both"

我希望将Box 2作为Box 1的绝对位置，如下所示： http://i301.photobucket.com/albums/nn42/b1rk0ff/done_zpsd3cd25c0.png

我试过这样但却没有工作：

Html：

<div class="box1">
    <div class="box2">
        <div class="box3">box-3</div>
        <div class="box3">box-3</div>
        <div class="box3">box-3</div>
        <div class="box3">box-3</div>
        <div class="box3">box-3</div>
        <div style="clear:both;"></div>
    </div>
    testing
</div>

风格：

    .box1 { 
        width:300px;
        background-color: red;
        position: relative;
    }

    .box2 {
        width: 200px;
        background-color:blue;
        position: absolute;
        right:-100px;
        top:30px;
    }   

    .box3 {
        height:50px;
        width: 50px;
        background-color:yellow;
        float:left;
        margin:10px;
        color:black;
    }

这里是codepen： http://codepen.io/anon/pen/Kkirs?editors=110

有人可以帮忙吗？

谢谢

Answer 1

如何从position:relative中删除.box1，并在position:absolute

中将.position:relative更改为.box2

请参阅下面的snipet，然后查看.box2

中的评论

.box1 {
  width: 300px;
  background-color: red;
}
.box2 {
  width: 200px;
  background-color: blue;
  position: relative;
  right: -150px; /* changed this value to -150px » was -100px */
  top: 10px; /* changed this value to 10px » was 30px */
  padding:10px /* add padding as you need and if you need */
}
.box3 {
  height: 50px;
  width: 50px;
  background-color: yellow;
  float: left;
  margin: 10px;
  color: black;
}

<div class="box1">
  <div class="box2">
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div style="clear:both;"></div>
  </div>
  testing
</div>

Answer 2

为什么不能为.box1设置固定的高度？

＆＃13;

＆＃13;

  .box1 { 
    width:300px;
    background-color: red;
    position: relative;
    height:250px;
}

.box2 {
    width: 200px;
    background-color:blue;
    position: absolute;
    right:-100px;
    top:30px;
}   

.box3 {
    height:50px;
    width: 50px;
    background-color:yellow;
    float:left;
    margin:10px;
    color:black;
}

＆＃13;

<div class="box1">
    <div class="box2">
        <div class="box3">box-3</div>
        <div class="box3">box-3</div>
        <div class="box3">box-3</div>
        <div class="box3">box-3</div>
        <div class="box3">box-3</div>
        <div style="clear:both;"></div>
    </div>
    testing
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需按位置替换position：absolute：relative。

Answer 4

因为box2是绝对的，所以盒子1不知道它的孩子的高度，

您需要恢复使用两个相对元素（或根本没有位置定义）并使用margin-left和margin-top来解决此问题

Answer 5

谢谢大家，这就是我想要的。

希望它能帮助像我这样的新手。 ：）

＆＃13;

＆＃13;

.box1 {
  width: 300px;
  background-color: red;
}
.box2 {
  width: 200px;
  background-color: blue;
  position: relative;
  right: -150px; /* changed this value to -150px » was -100px */
  top: 10px; /* changed this value to 10px » was 30px */
  padding:10px /* add padding as you need and if you need */
}
.box3 {
  height: 50px;
  width: 50px;
  background-color: yellow;
  float: left;
  margin: 10px;
  color: black;
}

＆＃13;

<div class="box1">
  <div class="box2">
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div style="clear:both;"></div>
  </div>
  testing
</div>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

.box1 {
  width: 300px;
  background-color: red;
}
.box2 {
  width: 200px;
  background-color: blue;
  position: relative;
  right: -150px; /* changed this value to -150px » was -100px */
  top: 10px; /* changed this value to 10px » was 30px */
  padding:10px /* add padding as you need and if you need */
}
.box3 {
  height: 50px;
  width: 50px;
  background-color: yellow;
  float: left;
  margin: 10px;
  color: black;
}

＆＃13;

<div class="box1">
  <div class="box2">
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div class="box3">box-3</div>
    <div style="clear:both;"></div>
  </div>
  testing
</div>

＆＃13;

＆＃13;

＆＃13;