css将一个图像放在另一个的顶部 [英] css placing one image on top of another

问题描述

我正在处理css设计模板。我有两个图像 imageOne 和 imageTwo 。两个都是 position：relative ，因为如果我设置其中一个 position：absolute ，那么它不再保持响应回应性是这里的关键。我想要的是将 imageTwo 放在 。 我如何实现，而twitterbootstrap的响应功能仍然适用于这两个图片。

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.

下面是我的代码和 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;
  }

推荐答案

div的位置相对和改变 .image {position：relative 到绝对，它为我工作。
http://jsfiddle.net/uS7nw/2/

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>

和

.container {
    position: relative;
}

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

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