绝对定位在同一个地方但不在同一个地方显示的两个元素

Question

所以，我有这两件事。一个是透明按钮，一个是背后的图像。

我这样做是因为添加背景不起作用。这是我尝试过的：

.top-container > button {
    background-image: url(path-to-image); /* I also tried image() */
    background-repeat: no-repeat
    width: 100px;
    height: 33px;
    color: white;
    border: none;
    font-family: 'CapitalisTypOasis', 'CapitalisTypOasisMedium';
    text-align: center;
    z-index: 2;
    position: absolute;
    top: 1.7em;
    padding: 0;
}

我做了所有我能想到的微小变化，由于我的截止日期很快，我在按钮后面放了一张图片。完美运行。

.boutonsim { 
    display: block;
    height: 33px;
    width: 100px;
    position: absolute;
    top: 1.7em;
    z-index: 1;
}

.top-container > button {
    display: block;
    width: 100px;
    height: 33px;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    border: none;
    font-family: 'CapitalisTypOasis', 'CapitalisTypOasisMedium';
    text-align: center;
    z-index: 2;
    position: absolute;
    top: 1.7em;
    padding: 0;
}

HTML:

<div class="top-container">
            <img id="img2" src="images/haut.png" />
            <img id="title" src="images/nom.png" />
            <img id="logo" src="images/LOGO.png" />
            <div class="boutonsim" style="right: 80px;"><img src="images/clipart/boutonORIGINAL.png" /></div>
            <button style="right: 80px;">Culture</button>

        </div>

它们应该在同一个地方，但当我在 Chrome 中打开我的文件时，它们却不在。有人能帮忙吗？谢谢

如果有帮助的话，这是一个片段中结果的 GIF：

<a href="https://gyazo.com/c849e62e7893453a2b442f2060bce1e4"><img src="https://i.gyazo.com/c849e62e7893453a2b442f2060bce1e4.gif" alt="Image from Gyazo" width="166"/></a>

Answer 1

TL;DR; 将它们放置在除 em.

之外的任何位置

该按钮的 font-size 必须不同于 dom 的其余部分（这也是默认行为），这意味着 div 和 button有不同的 font-size。因此，因为您使用 em 定位它们，它们的定位将不同（div：27.2px 和按钮：22.667px），因为 CSS 编译器查看元素 font-size 来确定 px.

中的最高值

Answer 2

如果您需要将 background 图像应用到您的按钮（我相信这是您的真实问题）。

button {
  width: 100px;
  height: 33px;
  padding: 0;
  background:url(https://picsum.photos/id/1019/100/33) no-repeat;
  color: white;
  border: none;
}

<button>Culture</button>

绝对定位在同一个地方但不在同一个地方显示的两个元素

Two elements absolutely positioned at the same place but not showing at the same place

html

css

css-position

background-image