Как выровнять «абсолютное правое положение» в фиксированном заголовке?

Question

.header{ 
 
\t \t \t \t position: fixed; 
 
\t \t \t \t width: 2000px; 
 
\t \t \t \t height: 70px; 
 
\t \t \t \t background-color: #ff509a; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .subTitle{ 
 
\t \t \t \t width: 100px; 
 
\t \t \t \t line-height: 70px; 
 
\t \t \t \t float: right; 
 
      margin-right: 20px; 
 
\t \t \t \t color: white; 
 
\t \t \t \t font-size: 50px; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .content{ 
 
\t \t \t \t width: 2000px; 
 
\t \t \t \t height: 3000px; 
 
\t \t \t }

<div class="header"> 
 
\t \t \t <div class="subTitle"> 
 
\t \t \t \t hello 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="content"> 
 
\t \t \t 
 
\t \t </div>

Вот код. Элемент hello должен появиться справа, когда я перейду к правой стороне. Пожалуйста помоги!

Answer 1

Просто добавьте

position: fixed; 
right:0; 

в .subTitle

работу!

Answer 2

Добавить z-index:1; в .header и position:absolute; z-index:2;left: 64%;/* or whatever spacing you want*/ в .subTitle. Не забудьте удалить float, так как он больше не нужен. Here is a pretty good article on z-index from MDN. Таким образом, CSS будет выглядеть следующим образом:

.header { 
    position: fixed; 
    width: 2000px; 
    height: 70px; 
    background-color: #ff509a; 
    z-index: 1; 
} 

.subTitle { 
    width: 100px; 
    line-height: 70px; 
    /* float: right; */ 
    /* margin-right: 20px; */ 
    color: white; 
    font-size: 50px; 
    z-index: 2; /*z-index of 2 to overlay the .header element*/ 
    position: absolute; /*absolute positioning*/ 
    left: 64%; /*change this if needed*/ 
}