Question

我有一个简单的JSFiddle，基本上是在尝试将一个div覆盖在另一个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？

Answer 1

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

赞：

button {
  position: relative;
}

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

Answer 2

您可以这样做：

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

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

2 个答案: