定位绝对问题

Question

我正在尝试将两个div叠加在一起（意味着它们重叠）b / c下面的div有一个图像（Yelp徽标），这是一个笨拙的大小。我使用“position：absolute” - 但是不是那些div在彼此之上，而右边的div会崩溃进入它们（而我试图崩溃的div则没有）。

我该如何解决这个问题？或者只是给包含Yelp徽标的div带来负余量更有意义吗？

如需澄清，请访问以下网站：www.valleylawyermarketing.com

这就是它应该是这样的：但是Yelp突破了上面的div。

<div class="testimonial logos cycle-slide cycle-slide-active" style="z-index: 99; position: absolute; top: 0px; left: 0px; visibility: visible; display: block; opacity: 1;">
<div class="box">
<div class="yelp">
<p>More reviews:</p>
<div class="images2">
<img class="" src="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/themes/roots-master/assets/img/yelp.png">
</div>
</div>
</div>
<div class="also-part">
<p>We're also part of:</p>
<div class="images">
<img class="" src="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/03/google-partner.png">
<img class="" src="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/03/yext-partner.png">
<img class="" src="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/03/bbb-logo.png">
</div>
</div>
</div>

.logos .box {
    float: left;
    width: 30%;
}
.logos .yelp {
    position: absolute;
}
.logos .images2 {
    position: absolute;
}
.logos .also-part {
    display: block;
    float: left;
    width: 70%;
}
.logos .images {
    float: left;
    margin-top: 10px;
    width: 100%;
}

Answer 1

听起来您希望所有徽标都在一条线上，水平相邻，并且Yelp徽标稍微高一些，以补偿徽标的高度。我建议丢失绝对定位，而是在图像上使用负边距将其略微拉高。

.logos .box {
  float: left;
  width: 30%;
}
.logos .also-part {
  display: block;
  float: left;
  width: 70%;
}
.logos img {
  float: left;
  margin-top: 0px;
}
.logos .yelp img {
  margin-top: -15px;
}

https://jsfiddle.net/daCrosby/2nkjxahc/2/

Answer 2

像这样？ https://jsfiddle.net/5dbjuLof/

只需移除浮动和每个绝对位置，它们将叠加

.logos .also-part {
    display: block;
    width: 70%;
}
.logos .images {
    float: left;
    margin-top: 10px;
    width: 100%;
}

Answer 3

感谢您的帮助。我只做了一个负余量。这似乎是最简单的方法。

再次感谢。