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

虾米哥 阅读:10 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.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号