Question

我正在研究CSS设计模板。

我有两张图片imageOne和imageTwo。

两者都是position: relative，因为如果我设置其中一个position: absolute，那么它就不会再保持响应状态，响应性就是关键所在。

我想要的是将imageTwo置于imageOne之上。

如果twitterbootstrap的响应功能仍适用于这两个图像，我怎样才能实现这一目标？

以下是我的代码：（jsfiddle available 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;
}

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

Answer 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）。

但第二个孩子的位置相对于container为（10px，20px），或相对于body（60px，120px）（从顶部加100 + 10，100 + 20）从左边开始。）

Answer 3

我认为您希望将它们都包含在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;
}

Answer 4

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

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

Answer 5

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

Answer 6

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

fiddle

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

Answer 7

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

HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

CSS将一个图像放在另一个上面

7 个答案: