html之相对位置按钮没有一直向右对齐

虾米哥阅读：3 2023-09-15 19:09:47 评论：0

.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。感谢任何帮助。

请您参考如下方法:

您需要为按钮设置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>

标签:程序员

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。