相対位置ボタンは右の「ラップ」のdivの中に、ボタンのすべての方法のトップの位置を設定しようとすると、右

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のインデックス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>