Question

我真的坚持这一点，并会欣赏任何方向。

我需要使用CMS和html编写以下设计，但我不知道如何让中心图像与图像右侧和左侧的div重叠。我一直在阅读相关位置和z索引，但我尝试过的所有内容都失败了。通常当我排队三次潜水时，我将使用float属性并且它完美地工作但事实证明z-index只能用于定位元素。如果有人能让我开始朝着正确的方向前进，我可能会想出来。

请参阅我在此处尝试编码的设计：https://cdn.shopify.com/s/files/1/0211/8026/files/Example.png?9982

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

尝试一下，如果使用position:absolute会更好一些但是因为你想浮动会有重新调整问题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>

Answer 2

您可以使用position执行此操作:(为强调添加颜色）

fiddle

   .row-container {
    width:900px;
    height:300px;
    margin:auto;
    text-align: center;
    border:2px solid black;
    background-color:blue;
    position:relative;
    }

    .box1 {
    height:216px;
    width: 288px;  
    left:0px;
    position:absolute;
    z-index:10;
    }

    .image {
    height:250px;
    width: 350px; 
    position:absolute;
    top:20px;
    left:275px;
    z-index:100;
    background-color:red;
    }

    .box2 {
    height:216px;
    width: 288px;
    right:0px;
    position:absolute;
    z-index:10;
    }

    div{
    background-color:green;
    }

Answer 3

您可以在z-index上使用position: relative，因此请将其添加到内部元素并设置z-index。

要创建重叠，您可以在第二个和第三个元素上使用负margin-left。

CSS定位帮助 - 两侧的图像重叠DIVS

3 个答案: