如何在按钮内使用相对定位？答案

【问题标题】：How do I use relative positioning inside a button?如何在按钮内使用相对定位？
【发布时间】：2019-12-29 00:23:47
【问题描述】：

我有一个简单的JSFiddle 我基本上是在尝试将一个 div 覆盖在另一个上。我可以在传统的 div 中轻松做到这一点（见紫色），但是当我用按钮尝试同样的事情时，它就不起作用了。

<button>
  <div class="background">&nbsp;</div>
  <div class="label">This is the label</div>
</button>

.background{
  background-color: green;
  height: 100%;
}
.label{
  position: relative;
  top: -100%;
}

如何在按钮内相对定位 div？

【问题讨论】：

标签： css

【解决方案1】：

您可以在子级.label 上使用position: absolute;，在父级button 上使用position: relative;。

像这样：

button {
  position: relative;
}

.label{
  position: absolute;
  top: 0;
}

【讨论】：

我仍然有绝对定位和移动的问题。我会尝试一下，但我记得绝对定位在旧版浏览器中存在问题。
看起来还不错 - caniuse.com/#search=position%3A%20absolute
已经有一段时间了，但我会看看它在我使用的浏览器上是否像我需要的那样工作（尤其是 Safari，因为这似乎滞后）。
所以如果你能解决这个问题，我会给你回支票 (jsfiddle.net/9u4nw1fv/19) 注意除非声明它不会保持宽度。
不保持宽度的原因是背景在兄弟之后没有调整宽度

【解决方案2】：

你可以这样做：

button{
    position: relative; /* will make all absolute elements inside it relative to itself */
}
.label{
    position: absolute;
    top: -100%;
}

【讨论】：

即使在屏幕中间也能正常工作吗？
我以前在移动浏览器上的绝对定位问题是否解决了？
我在这里试过了，还是不行jsfiddle.net/9u4nw1fv/16