Как вы размещаете изображение поверх двух блоков / контейнеров?

Question

У меня есть веб-макет, который меня попросили сделать так, чтобы прозрачный PNG сидел поверх двух элементов div несколько раз (в несколько поворотов).Я создал сайт с использованием Bootstrap 4.1, поэтому для форматирования сайта я использую контейнеры / row / col.

<section class="one">
    <!-- .container, .row, .col for content -->
</section>
  <img src="flowers.png">
<section class="two">
    <!-- .container, .row, .col for content -->
</section>

Codepen: https://codepen.io/anon/pen/odPZqN

Так что же рекомендуетсяза изображение, сидящее на вершине двух контейнеров?Лучшее решение, которое я могу найти прямо сейчас, - это использовать библиотеку JS с именем Tether , но это далеко не легкое решение.Если сайт адаптивный / отзывчивый, положение об отпущении не может быть и речи.

Кодовое перо с использованием относительного / абсолютного: https://codepen.io/anon/pen/jxvmMX

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

Codepen используя float: https://codepen.io/anon/pen/QrVpor

Что выдумаете, мои варианты здесь?

Макет:

Answer 1

Вы можете попробовать что-то вроде этого, используя медиа-запросы для позиционирования изображения в разных точках останова:

.outer {
  position: relative;
}

#flower {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
}

// This is just an example - experiment with values that work for you.
@media screen and (max-width: 990px) {
    #flower {
        left: 10px;
        top: 30px;
    }
}

<div class="outer">
  <section class="one">
      <!-- .container, .row, .col for content -->
  </section>
    <img src="flowers.png" id="flower">
  <section class="two">
      <!-- .container, .row, .col for content -->
  </section>
</div>