html - 如何使文本在一行中居中，按钮 float 到它的右边？

Question

我想完成一个非常简单的布局，但正在努力。我希望标题在父 div 中居中，标题右侧有一个 float 按钮(在同一行)。下面的代码实现了这个效果，但是按钮是不可点击的，因为标题覆盖了它。关于如何实现这一点有什么建议吗？

.header {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 20px;
  text-align: center;
  text-decoration: underline;
}
.parent {
  border: solid 3px #000;
  padding: 5px;
  position: relative;
}
.button {
  float: right;
}

<div class="parent">
  <div class="header">My header:</div>
  <button type="button" name="abutton" class="button" onclick="alert('a');">The button!</button>
</div>

编辑:

修正了代码错误。

Answer 1

使用 z-index css 属性(并使按钮相对定位):

.header {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 20px;
  text-align: center;
  text-decoration: underline;
  z-index: 1;
}

.button {
   float: right;
   position: relative;
   z-index: 2;
}