Html CSS 将一张图片放在另一张图片上

CSS placing one image on top of another

提问by Om3ga

I am working on CSS design template.

我正在研究 CSS 设计模板。

I have two images imageOneand imageTwo.

我有两个图像imageOne和imageTwo.

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

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

What I want is to place imageTwoon top of imageOne.

我想是的地方imageTwo之上imageOne。

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

当 twitterbootstrap 的响应功能仍然适用于这两个图像时，我该如何实现？

Below is my code: (jsfiddle available here)

下面是我的代码：（的jsfiddle可用这里）

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

CSS

CSS

.image {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.imageOne {
    z-index: 0;
}
.imageTwo {
    z-index: 1;
}

回答by Ed T.

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

我为这些图像添加了一个包装器 div，位置相对并更改.image { position: relative为absolute，它对我有用。 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;
}

回答by Ozzy

When you have elements within a containerwhich has the property: position: relative;
then any elements within that container which have the property: position: absolute;
will have their offset origin set to the top-left of the container.

当 acontainer中有具有属性的position: relative;
元素时：那么该容器中具有属性：的任何元素都position: absolute;
将其偏移原点设置为容器的左上角。

For example,

例如，

<div class="relative"> <!-- top: 50px; left: 100px; //-->
  <div class="absolute"></div> <!-- top: 0; left: 0; //-->
  <div class="absolute"></div> <!-- top: 10px; left: 20px; //-->
</div>

The first absolute child will be positioned at (50px, 100px) relative to the body, or (0,0) from the container.

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

But the second child will be positioned at (10px, 20px) relative to container, or (60px, 120px) relative to the body(add 50+10 from the top, 100+20 from the left).

但是第二个孩子将定位在 (10px, 20px) 相对于container，或 (60px, 120px) 相对于body（从顶部添加 50+10，从左侧添加 100+20）。

回答by Pattle

I think you want to wrap both of them in a div with position:relative

我想你想把它们都包装在一个 div 中 position:relative

<div style="position:relative">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>

Then give both of the images an absolute position

然后给两个图像一个绝对位置

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

回答by Njaal Gjerde

If you have a responsive image in a container and want to place another image on top of that image:

如果您在容器中有一个响应式图像并且想要在该图像之上放置另一个图像：

HTML:

HTML：

.container {
  position: relative;
  width: 100px;/*Or whatever you want*/
}
.imageOne {
  width: 100%;
}
.imageTwo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <img class="imageOne" src="https://www.google.no/images/srpr/logo11w.png">
  <img class="imageTwo" src="https://news.ycombinator.com/y18.gif">
</div>

回答by Alex Garulli

http://jsfiddle.net/uS7nw/4/

http://jsfiddle.net/uS7nw/4/

.imageTwo {
    z-index: 1;
    background:red;
    margin-top: -42px;
}

回答by Mr Jones

.imageTwo {
    z-index: 1;
    margin-top: -100px;
}

回答by David Starkey

Change position: relative;to position: absolute;

更改position: relative;为position: absolute;

fiddle

小提琴

If you still want a relative position, wrap the absolute in another div.

如果您仍然需要相对位置，请将绝对位置包装在另一个div.