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

Posted 2023-03-05

【中文标题】CSS 将一张图片放在另一张图片之上

【英文标题】：CSS placing one image on top of another

【发布时间】：2013-08-16 15:22:04

【问题描述】：

我正在开发 CSS 设计模板。

我有两张图片imageOne 和imageTwo。

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

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

如何在 twitterbootstrap 的响应式功能仍然适用于这两个图像的情况下实现这一点？

下面是我的代码：（jsfiddle 可用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;

【问题讨论】：

我认为这就是你想要的：jsfiddle.net/29u8S

【参考方案1】：

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

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>

【讨论】：

我喜欢这个，但在容器 div 中的 google 徽标下方不断得到一些边距/填充。我在'Y'上尝试高度：50%，并希望正确地将其放置在左下角，顶部：50%（或 20%-80%），但它略有偏离。有什么提示吗？

【参考方案2】：

当您在 container 中包含具有以下属性的元素时：position: relative; 然后该容器中具有以下属性的任何元素：position: absolute; 将它们的偏移原点设置为容器的左上角。

例如，

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

第一个绝对子节点将定位在相对于body 的 (50px, 100px) 处，或者距离 container 的 (0,0)。

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

【参考方案3】：

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

【参考方案4】：

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

【讨论】：

我认为 PO 不想使用 position:absolute

【参考方案5】：

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

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

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

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

【参考方案6】：

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

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

【讨论】：

那是 div 不是 图像

这是一个名为 .imageTwo 的类，您可以将其应用于您想要的任何 DOM 元素

可以这样<image src="../" class="imageTwo">?

是的，或者 ... -- :D

【参考方案7】：

将position: relative; 更改为position: absolute;

fiddle

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