Как разместить блоки друг за другом?

Рейтинг: 1Ответов: 3Опубликовано: 30.04.2015

Есть код

Нужно разместить перед оранжевыми блоками еще одни блоки. Я понимаю, что возможно вопрос дилетантский, но все же.

.our_work {
  width: 100%;
  text-align: center;
}
.bg {
  position: relative;
  float: left;
  width: 44%;
  min-width: 20px;
  min-height: 22px;
  height: 222px;
  margin-left: 5%;
  background-color: yellow;
}
.bg:first-child {
  margin: 0;
}
.blcok {
  display: inline-block;
  width: 42%;
  height: 50%;
}
.img_work {
  position: absolute;
}
.abs {
  right: 5%;
}
.abs1 {
  left: 30%;
}
<section class="our_work">
  <div class="adler_work blcok">
    <p>текст примера</p>
    <div class="bg"></div>
    <figure class="img_work">
      <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" />
    </figure>

    <div class="bg"></div>
    <figure class="img_work abs1">
      <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" />
    </figure>
  </div>

  <div class="novoros_work blcok">
    <p>текст примера</p>
    <div class="bg"></div>
    <figure class="img_work">
      <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" />
    </figure>

    <div class="bg"></div>
    <figure class="img_work abs">
      <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" />
    </figure>
  </div>

  <div class="krd_work blcok">
    <p>текст примера</p>
    <div class="bg"></div>
    <figure class="img_work">
      <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" />
    </figure>

    <div class="bg"></div>
    <figure class="img_work abs1">
      <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" />
    </figure>
  </div>

  <div class="tuapse_work blcok">
    <p>текст примера</p>
    <div class="bg"></div>
    <figure class="img_work">
      <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" />
    </figure>

    <div class="bg"></div>
    <figure class="img_work abs">
      <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" />
    </figure>
  </div>
</section>

но надо сделать вот так:

введите сюда описание изображения

Объясните мне пожалуйста, как лучше реализовать такую возможность? Много всего уже пробовал...

Ответы

Ответов пока нет.