CSS如何将一张图片放在另一张图片上方

Question

我正在设计CSS模板。

我有两张图片，imageOne和imageTwo。

它们都是使用position: relative，因为如果我将它们中的一个设置为position: absolute，那么它就不再保持响应式，而响应性在这里很关键。

我想要的是将imageTwo放在imageOne的上方。

如何实现这一点，同时仍然让twitterbootstrap的响应特性适用于这两个图像？

以下是我的代码：（jsfiddle可以在这里找到）

<div class="imageOne image"></div>
<div class="imageTwo image"></div>

CSS

.image {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.imageOne {
    z-index: 0;
}
.imageTwo {
    z-index: 1;
}

- Om3ga

---

我认为这就是你想要的：http://jsfiddle.net/29u8S/ - Tiago

Answer 1

我为这些图片添加了一个包装器div，使用相对位置，并将 .image { position: relative} 改为 absolute，这对我起作用了。 http://jsfiddle.net/uS7nw/2/

<div class="container">
    <div class="imageOne image"></div>
    <div class="imageTwo image"></div>
</div>

并且

.container {
    position: relative;
}

.image {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

- Ed T.

---

我认为PO不想使用position:absolute。 - Alex Garulli

Answer 2

当你在一个具有属性：position: relative;的container中有元素时，那么在该容器内具有属性：position: absolute;的任何元素都会将它们的偏移原点设置为容器的左上角。

例如，

<div class="relative"> <!-- top: 50px; left: 100px; //-->
  <div class="absolute"></div> <!-- top: 0; left: 0; //-->
  <div class="absolute"></div> <!-- top: 10px; left: 20px; //-->
</div>

第一个绝对定位的子元素将相对于 body 定位在 (50px, 100px) 的位置，或者相对于 container 在 (0,0) 的位置。

但是第二个子元素将相对于 container 定位在 (10px, 20px) 的位置，或者相对于 body 在 (60px, 120px) 的位置（从顶部加上 50+10，从左侧加上 100+20）。

- Ozzy

Answer 3

如果您在容器中有一个响应式图像，并且想要将另一张图像放在该图像的顶部：

HTML代码如下：

.container {
  position: relative;
  width: 100px;/*Or whatever you want*/
}
.imageOne {
  width: 100%;
}
.imageTwo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <img class="imageOne" src="https://www.google.no/images/srpr/logo11w.png">
  <img class="imageTwo" src="https://news.ycombinator.com/y18.gif">
</div>

- Njaal Gjerde

---

我喜欢这个，但是在容器div下方一直得到一些边距/填充google标志。我正在尝试在“Y”上使用heigth:50％，并希望使用top:50％（或20％-80％）将其正确放置在左下角，但它略有偏差。有什么提示吗？ - Niek

Answer 4

我认为你希望将它们都包裹在一个具有 position:relative 的 div 中。

<div style="position:relative">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>

然后给这两个图片设置绝对位置。

.image {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid red;
}

- Pattle

Answer 5

http://jsfiddle.net/uS7nw/4/

.imageTwo {
    z-index: 1;
    background:red;
    margin-top: -42px;
}

- Alex Garulli

---

那是一个 div，不是图片。 - Faytraneozter

那是一个名为.imageTwo的类，您可以将其应用于任何想要的DOM元素。 - Alex Garulli

可以这样写程序吗？<image src="../" class="imageTwo"> - Faytraneozter

没错，就是这样或者 <div class="imageTwo"> ...</dv> -- :D - Alex Garulli

Answer 6

.imageTwo {
    z-index: 1;
    margin-top: -100px;
}

- Mr Jones

Answer 7

将 position: relative; 修改为 position: absolute;

fiddle

如果你仍想使用相对定位，请在另一个 div 中包装绝对定位。

- David Starkey