html - 图像在两侧重叠 DIVS

Question

我真的很困惑，希望得到任何指导。

我需要使用 CMS 和 html 编写以下设计代码，但我不知道如何让中心图像与图像右侧和左侧的 div 重叠。我一直在阅读有关相对位置和 z 索引的内容，但我尝试的一切都失败了。一般来说，当我排列三个潜水时，我会使用 float 属性，它工作得很好，但事实证明 z 索引只能与定位元素一起使用。如果有人能让我朝着正确的方向开始，我可能就能弄清楚。

查看我正在尝试编码的设计:https://cdn.shopify.com/s/files/1/0211/8026/files/Example.png?9982

这是基本框架，但我不知道从这里去哪里......

.row-container {
  width: 100%;
  height: 300px;
  margin: auto;
  text-align: center;
  position: relative;
}
.box1 {
  height: 216px;
  width: 288px;
  float: left ; /* <-- This does not work */
  border: 1px solid blue;
}
.image {
  height: 250px;
  width: 350px;
  float: left ; /* <-- This does not work */
  border: 1px solid grey;
}
.box2 {
  height: 216px;
  width: 288px;
  float: left;  /* <-- This does not work */
  border: 1px solid red;
}

<div class="row-container">
  <div class="box1"></div>
  <div class="image">-- Should I use a div for the image?</div>
  <div class="box2"></div>
</div>

Answer 1

尝试一下，如果使用 position:absolute ，效果会更好一点，但由于您想要 float ，因此会出现调整大小问题 Fiddle

缩小以获得效果

.row-container {
  width: 100%;
  height: 300px;
  margin: auto;
  text-align: center;
  position: relative;
}
.box1 {
  position: relative;
  z-index: -1;
  background: green;
  height: 216px;
  width: 288px;
  float: left;
}
.image {
  margin-left: -80px;
  background: red;
  float: left;
  height: 250px;
  width: 200px;
}
.image img {
  width: 300px;
}
.box2 {
  position: relative;
  z-index: -1;
  float: left;
  background: blue;
  height: 216px;
  width: 288px;
}

<div class="row-container">
  <div class="box1"></div>
  <div class="image">
    <img src="http://placekitten.com/300/301" />
  </div>
  <div class="box2"></div>
</div>