具有不同顶部和左侧值的两个图像的叠加答案

【问题标题】：Superposition of two images with different top and left values具有不同顶部和左侧值的两个图像的叠加
【发布时间】：2021-01-14 14:11:36
【问题描述】：

我想问一下，我们如何在同一个容器中使用 CSS 将一个图像放在另一个图像上但不在同一个坐标上。我试过这个：

HTML：

<div class="tisane">
            <img id="2" src="images/herbal-tea-cup-png-images-35.png" alt="Tasse d'infusion de millepertuis" style="z-index: 2;"/>
            <img id="1" src="images/noirairbrush.png" alt="" style="z-index: 1;">
        </div>

CSS：

.tisane {
      display: inline-flex;

  }

  .tisane img #2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: 220px;
    position: absolute;
    top: 300px;
    left: 140px;
  }
   .tisane img #1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: 220px;
    position: absolute;
    top: 300px;
    left: 130px;

    
 }

结果如下：

基本上，由于某种原因，图像完全离开了框架，我只改变了新图像（airbrushnoix.png）的五个像素。在我更改顶部和左侧值之前，一切都很好。

【问题讨论】：

基本上我希望图像喷枪位于图像茶杯下方，但我不希望它们完全位于同一顶部：和左侧：值

标签： html css image flexbox css-selectors

【解决方案1】：

首先不要以数字开头 ID。因为它不会起作用。类标识符允许以数字开头，但 ID 标识符不允许。所以这基本上是你的问题。而是做这样的事情.tisane img#img1 { ... }

试试这个

.tisane {
  display: inline-flex;
  position: relative;
}

.tisane img#img2 {
  top: 80px;
  left: 0px;
}

.tisane img#img1 {
  top: 0;
  left: 130px;
}

.tisane img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 220px;
  position: absolute;
}

<div class="tisane">
  <img id="img1" src="https://static-s.aa-cdn.net/img/ios/932332871/edd30e1f8a35bdfdd85c921fe1a6c616?v=1" />
  <img id="img2" src="https://www.meme-arsenal.com/memes/b0c73f50f74400e6458644eac56fa9f5.jpg" />
</div>

【讨论】：