如何在两个div之间定位图像

Question

我必须在两个 div 的底部之间放置一个图像，一个在另一个里面，例如：

这个例子的代码是：

<div style="background:blue;width:500px;height:150px;overflow:hidden;">
   <div style="background:red;width:500px;height:100px;margin-top:20px;">
    //DOES IMAGE GOES HERE?
   </div>   
</div>

我知道使用绝对位置我可以将图像定位在那里..但我不喜欢这种定位..还有另一种方法吗？谢谢！！！

Answer 1

嘿现在习惯了

.parent{
background:blue;
  width:500px;
  height:150px;
  overflow:hidden;
}
.child{
background:red;
  width:500px;
  height:100px;
  margin-top:20px;
  position:relative;
}
.child img{
position:absolute;
  bottom:-25px;
  right:6%;
  width:200px;
  height:50px;
}

.parent{
background:blue;
  width:500px;
  height:150px;
  overflow:hidden;
}
.child{
background:red;
  width:500px;
  height:100px;
  margin-top:20px;
  position:relative;
}
.child img{
position:absolute;
  bottom:-25px;
  right:6%;
  width:200px;
  height:50px;
}

.parent{
background:blue;
  width:500px;
  height:150px;
  overflow:hidden;
}
.child{
background:red;
  width:500px;
  height:100px;
  margin-top:20px;
  position:relative;
}
.child img{
position:absolute;
  bottom:-25px;
  right:6%;
  width:200px;
  height:50px;
}

Answer 2

完整的 CSS 示例

.blue {
  background: blue;
  width: 500px;
  height: 150px;
  overflow: hidden;
}

.red {
  background: red;
  width: 500px;
  height: 100px;
  margin-top: 20px;
  position: relative;
}

.image {
  position: absolute;
  bottom: -10px;
  /* half of image height */
  right: 10px;
  /* right space */
}

.image img {
  display: block;
  width: 100px;
  height: 20px;
  background: green;
}

<div class="blue">
  <div class="red">
    <div class="image">
      <img src="" alt="" />
    </div>
  </div>
</div>