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

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>

第一个绝对子将位于(50px,100px)相对于body或(0,0)的位置container.

但是第二个孩子的位置相对于(10px,20px)相对于container(60px,120px)相对于body(从顶部加50 + 10,从左边加100 + 20).