CSS 将一张图片放在另一张图片之上答案

【问题标题】：CSS placing one image on top of anotherCSS 将一张图片放在另一张图片之上
【发布时间】：2013-08-16 15:22:04
【问题描述】：

我正在开发 CSS 设计模板。

我有两张图片imageOne 和imageTwo。

两者都是position: relative，因为如果我将其中一个设置为position: absolute，那么它就不会再保持响应性了，响应性是这里的关键。

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

如何在 twitterbootstrap 的响应式功能仍然适用于这两个图像的情况下实现这一点？

下面是我的代码：（jsfiddle 可用here）

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

【问题讨论】：

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

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

如果您在容器中有响应式图片，并且想要在该图片上放置另一个图片：

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>

【讨论】：

我喜欢这个，但在容器 div 中的 google 徽标下方不断得到一些边距/填充。我在'Y'上尝试高度：50%，并希望正确地将其放置在左下角，顶部：50%（或 20%-80%），但它略有偏离。有什么提示吗？

【解决方案2】：

当您在 container 中包含具有以下属性的元素时：position: relative;
然后该容器中具有以下属性的任何元素：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)。

但是第二个孩子将被定位在（10px，20px）相对于container，或（60px，120px）相对于body（从顶部添加50+10，从左侧添加100+20） .

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我为这些图像添加了一个包装器 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;
}

【讨论】：

我认为 PO 不想使用 position:absolute

【解决方案5】：

我想你想用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;
}

【讨论】：

【解决方案6】：

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

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

【讨论】：

那是 div 不是图像
这是一个名为 .imageTwo 的类，您可以将其应用于您想要的任何 DOM 元素
可以这样<image src="../" class="imageTwo">?
是的，或者
... -- :D

【解决方案7】：

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

fiddle

如果您仍需要相对位置，请将绝对位置包装在另一个 div 中。

【讨论】：