相对位置按钮没有一直对齐

Question

.clearfix::after {
  display: block;
  content: "";
  clear: both;
}

.header {
  background-color: bisque;
}

.wrap {
  max-width: 960px;
}

.content h1 {
  display: inline-block;
  padding-top: 0px;
}

.content p {
  float: right;
  padding-top: 0px;
  clear: both;
}

.button {
  background-color: red;
  position: relative;
  right: 0;
  top: 0;
  z-index: 1;
  float: right;
}

<header class="header ">
  <div class="wrap clearfix">
    <div class="content ">
      <h1>left</h1>
      <p>right</p>
      <a href="#" class="button">button</a>
    </div>

  </div>
</header>

尝试将按钮的位置一直设置在“wrap”div的右上方。正如在jsfiddle中看到的那样，它被文本所停止。所以它没有正确点亮，应该在文本上方一直向右，它是z-index 1.任何帮助表示赞赏。

Answer 1

您需要将position: absolute设置为按钮，将position: relative设置为容器。

.clearfix::after {
  display: block;
  content: "";
  clear: both;
}

.header {
  background-color: bisque;
}

.wrap {
  max-width: 960px;
}

.content {
  position: relative;
}

.content h1 {
  display: inline-block;
  padding-top: 0px;
}

.content p {
  float: right;
  padding-top: 0px;
  clear: both;
}

.button {
  background-color: red;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  float: right;
}

<header class="header ">
  <div class="wrap clearfix">
    <div class="content ">
      <h1>left</h1>
      <p>right</p>
      <a href="#" class="button">button</a>
    </div>

  </div>
</header>