Question

我有两对需要在div中显示的图像。图像分别为280px宽，200px高。我需要第二对显示在容器div中的第一对下面（之后）。这是我的代码：

<div>
  <div style="position:relative; z-index:1;">
    <img alt="background 1" src="background1.png" width="280" />
  </div>

  <div style="position:absolute; z-index:2;">
    <img alt="overlay 1" src="overlay1.png" width="280" />
  </div>

  <div style="position:relative; z-index:3;">
    <img alt="background 2" src="background2.png" width="280" />
  </div>

  <div style="position:absolute; z-index:4;">
    <img alt="overlay 2" src="overlay2.png" width="280" />
  </div>
</div>

我无法弄清楚如何将overlay1.png显示在background1.png之上，并将overlay2.png显示在background2.png之上，并且第二组图像在页面上低于首先设置它们之间有10px的间隙。

帮助！谢谢！

Answer 1

听起来你正在寻找更像这样的东西：

  <div style="position:relative; z-index:1;">
    <img alt="background 1" src="background1.png" width="280" style="position:absolute; z-index:2;"/>
    <img alt="overlay 1" src="overlay1.png" width="280" />
  </div>

  <div style="position:relative; z-index:3;">
    <img alt="overlay 2" src="overlay2.png" width="280" style="position:absolute; z-index:4;"/>
    <img alt="background 2" src="background2.png" width="280" />
  </div>

此外，除非您正在设计电子邮件，否则内联样式不是好习惯。

以下是使用css的更完整示例： Live demo (click).

<强>标记：

<div class="parent">
  <img alt="overlay 1" src="http://placehold.it/280x100/f9ff9f">
  <img alt="background 1" src="http://placehold.it/280x100">
</div>

<div class="parent">
  <img alt="background 2" src="http://placehold.it/280x100/f9ff9f">
  <img alt="overlay 2" src="http://placehold.it/280x100">
</div>

<强> CSS：

.parent {
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
}

.parent > img {
  width: 280px;
  z-index: 2;
}

.parent > img:first-child {
  position: absolute;
}

/* so you can see that they are overlayed */
.parent > img:first-child {
  width: 240px;
  height: 60px;
  margin: 20px;
}

Answer 2

这将有效：

<div>
  <div style="position:absolute; z-index:1; top: 0;">
    <img alt="background 1" src="background1.png" width="280" />
  </div>

  <div style="position:absolute; z-index:2; top: 0;">
    <img alt="overlay 1" src="overlay1.png" width="280" />
  </div>

  <div style="position:absolute; z-index:3; top: 290px;">
    <img alt="background 2" src="background2.png" width="280" />
  </div>

  <div style="position:absolute; z-index:4;  top: 290px;">
    <img alt="overlay 2" src="overlay2.png" width="280" />
  </div>
</div>

我将它们全部更改为绝对位置并添加了css-top-rules

使用z-index堆叠多个图像

2 个答案: