如何将图像放在两个div /容器的顶部？

Question

我有一个网络模型我被要求做出多次透明PNG位于两个div之上的位置（多次旋转）。我使用Bootstrap 4.1构建了网站，所以我使用containers / rows / 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

那么建议将图像放在两个容器的顶部是什么意思？我现在能找到的最好的解决方案是使用一个名为Tether的JS库，但这远远不是一个轻量级的解决方案。如果该网站具有适应性/响应性，则绝对位置是不可能的。

使用相对/绝对代码笔：https://codepen.io/anon/pen/jxvmMX

我试过看左边漂浮，虽然这给了我一个良好的开端，它似乎与内容不利地相互作用，推动文字时，我宁愿没有移动。

Codepen使用float：https://codepen.io/anon/pen/QrVpor

您认为我的选择是什么？

样机：

Answer 1

您可以尝试这样的方法，使用媒体查询将图像定位在不同的断点处：

＆＃13;

＆＃13;

.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;
    }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;