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

发布时间：2020-12-14 19:34:54 所属栏目：资源来源：网络整理

导读：我正在研究CSS设计模板. 我有两个图像imageOne和imageTwo. 两者都是位置：相对,因为如果我设置其中的一个位置：绝对,那么它不再保持响应,响应性是这里的关键. 我想要的是将imageTwo放在imageOne的顶部. 当twitterbootstrap的响应功能仍然适用于这两个图像时,

我正在研究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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!