CSS：父母不会用绝对位置清理孩子

user1019557 发表于 Dev

用户名

所以我有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

有人可以帮忙吗？

谢谢

迪帕斯

position:relative从中删除.box1，然后更改position:absolute为.position:relativein呢？.box2

请参阅下面的摘录，并查看其中的评论 .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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。