CSS 将一张图片放在另一张图片上 [英] CSS placing one image on top of another

问题描述

我正在研究 CSS 设计模板.

我有两个图像 imageOne 和 imageTwo.

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

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

我怎样才能在 twitterbootstrap 的响应功能仍然适用于这两个图像的情况下实现这一点?

下面是我的代码:(jsfiddle 可用这里)

<div class="imageTwo image"></div>

CSS

.image {位置:相对；宽度:100px；高度:100px；边框:1px纯红色；}.imageOne {z-索引:0；}.imageTwo {z-索引:1；}

解决方案

我为这些图像添加了一个包装 div，位置相对并将 .image { position: relative 更改为 绝对，它对我有用.http://jsfiddle.net/uS7nw/2/

<div class="imageOne image"></div><div class="imageTwo image"></div>

和

.container {位置:相对；}.图片 {位置:绝对；宽度:100px；高度:100px；边框:1px纯红色；}

I am working on CSS design template.

I have two images imageOne and imageTwo.

Both are position: relative because if I set one of them position: absolute then it does not stay as responsive anymore and responsiveness is the key here.

What I want is to place imageTwo on top of imageOne.

How can I achieve that while twitterbootstrap's responsive feature still works on these two images?

Below is my code: (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;
}

解决方案

I've added a wrapper div for those images, with position relative and changed .image { position: relative to absolute and it worked for me. http://jsfiddle.net/uS7nw/2/

<div class="container">
    <div class="imageOne image"></div>
    <div class="imageTwo image"></div>
</div>

And

.container {
    position: relative;
}

.image {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

这篇关于CSS 将一张图片放在另一张图片上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！