相对位置按钮完全不对准右侧

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>

尝试设置按钮，所有顶级的方式位置，内部的“包装”格的权利。正如在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>