您如何将图像放置在两个 div/容器之上？

Question

我有一个网络模型，有人要求我制作一个透明 PNG 多次（多次旋转）位于两个 div 顶部的位置。我使用 Bootstrap 4.1 构建了站点，因此我使用容器/行/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 使用浮点数：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>