使用z-index堆叠多个图像 [英] Stacking multiple images with z-index

问题描述

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

 < div& 
< div style =position：relative; z-index：1;> 
< img alt =background 1src =background1.pngwidth =280/> 
< / div> 
 
< div style =position：absolute; z-index：2;> 
< img alt =overlay 1src =overlay1.pngwidth =280/> 
< / div> 
 
< div style =position：relative; z-index：3;> 
< img alt =background 2src =background2.pngwidth =280/> 
< / div> 
 
< div style =position：absolute; z-index：4;> 
< img alt =overlay 2src =overlay2.pngwidth =280/> 
< / div> 
< / div> 
  

我不知道如何使overlay1.png显示在background1.png和overlay2之上。 png显示在background2.png上，第二组图像在页面上比第一组图像在其间具有10px的间隙。

帮帮我！谢谢！

解决方案

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

 < div style =position：relative; z-index：1;> 
< img alt =background 1src =background1.pngwidth =280style =position：absolute; z-index：2;/> 
< img alt =overlay 1src =overlay1.pngwidth =280/> 
< / div> 
 
< div style =position：relative; z-index：3;> 
< img alt =overlay 2src =overlay2.pngwidth =280style =position：absolute; z-index：4;/> 
< img alt =background 2src =background2.pngwidth =280/> 
< / div> 
  

此外，内联样式不是好的做法，除非您正在设计电子邮件。

下面是使用css的更完整的示例： Live demo（click） 。

$ b

标记：

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

< div class =parent>
< img alt =background 2src =http://placehold.it/280x100/f9ff9f>
< img alt =overlay 2src =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; 
} 
 
 / *，所以你可以看到它们是重叠的* / 
 .parent> img：first-child {
 width：240px; 
 height：60px; 
 margin：20px; 
} 
  

I have two pairs of images that need to be displayed in a div. The images are each 280px wide by 200px high. I need the second pair to be displayed below (after) the first pair in the container div. Here is my code:

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

I cannot figure out how to make overlay1.png display on top of background1.png, and overlay2.png to display on top of background2.png, and for the second set of images to be lower down on the page than the first set with a 10px gap between them.

Help! Thanks!

解决方案

It sounds to me you're looking for something more like this:

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

Also, inline styles are not good practice unless you're designing emails.

Here's a more complete example using css: Live demo (click).

Markup:

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

这篇关于使用z-index堆叠多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！