кнопки относительного положения не выравнивая весь путь направо

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>