html – CSS将一个图像放在另一个图像的顶部

我正在研究CSS设计模板.

我有两个图像imageOne和imageTwo.

两者都是位置：相对,因为如果我设置其中的一个位置：绝对,那么它不再保持响应,响应性是这里的关键.

我想要的是将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;
}

解决方法

我为这些图像添加了一个包装div,位置相对和更改.image {position：相对于绝对,它适用于我.
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;
}

原文地址：https://www.jb51.cc/html/224220.html