Полная ширина Откликающие изображения Overlap Bootstrap 3

Question

Я создал сетку с col-md-7 слева и col-md-5 справа. И я поставил изображения на Col-MD-5, которые реагируют и COL-MD-12, ширина - полная ширина

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-7">LEFT SIDE</div> 
       <div class="col-md-5"> 
        <div class="row"> 
         <div class="col-md-12"> 
          <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" /> 
         </div> 
         <div class="col-md-12"> 
          <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" /> 
         </div> 
         <div class="col-md-12"> 
          <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" /> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Демо: http://jsfiddle.net/r8rFc/298/

Это прекрасно работает без каких-либо проблем. Однако я использую меню под названием Zozo UI. Когда я помещаю свой код в контейнер контейнера Zozo UI, изображения перекрываются, а не остаются друг на друге. Таким образом, он просто показывает последний IMG

Я бы добавил сюда весь код, но, к сожалению, у него много зависимостей.

Пожалуйста, проверьте здесь.

ххх

<!-- Overview --> 
    <div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;"> 
     <div class="z-content-inner"> 
      <div class="row"> 
       <div class="col-md-7"> 
        <div class="row"> 
         <div class="col-md-12"> 
         LEFT 
         </div> 
        </div> 
       </div> 
       <div class="col-md-5"> 
        <div class="row"> 
         <div class="col-md-12"> 
          <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/> 
         </div> 
         <div class="col-md-12"> 
          <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/> 
         </div> 
         <div class="col-md-12"> 
          <img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/> 
         </div> 
        </div> 
       </div> 
      </div>       
     </div> 
    </div> 
</div> 

Нужна способ, чтобы получить, что изображения на верхней части друг друга, а не дублируют друг друга.

Answer 1

Вы

.productgroup img { 
    position: absolute; 
} 

, кажется, является причиной вашей проблемы.