CSSでタイトルを下に移動

Question

htmlファイルの構造を変更せずに、タイトルを最大幅640ピクセルで画面の下に移動するにはどうすればよいですか？むしろtop:25%を持つよりも

#header-image { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.header-title { 
 
    color: #000000; 
 
    font-size: 3em; 
 
    font-weight: 700; 
 
    position: absolute; 
 
    top: 25%; 
 
    width: 255px; 
 
    right: 50px; 
 
    text-align: left 
 
} 
 

 
.bottom-bar { 
 
    display: block; 
 
    height: 25px; 
 
    width: 100%; 
 
    background- color: #007cb0; 
 
} 
 

 
.screen-480 { 
 
    display: none; 
 
} 
 

 
.screen-768 { 
 
    display: block; 
 
} 
 

 
@media only screen and (max-width: 480) { 
 
    .screen-480 { 
 
    display: block; 
 
    } 
 
    .screen-768 { 
 
    display: none; 
 
    } 
 
}

<div id="header-image"> 
 
    <div class="image"> 
 
    <div class="header-title">The quick brown fox jumped over the lazy dog</div> 
 
    <img src="http://via.placeholder.com/480x683.png" width="100%" class="screen- 
 
    480" alt="img" /> 
 
    <img src="http://via.placeholder.com/1028x550.png" width="100%" class="screen- 
 
    768" alt="img" /> 
 
    </div> 
 
    <div class="bottom-bar"></div> 
 
</div>

Answer 1

、代わりに下にし、あなたはそれが下からになりたいどのくらいの量を置きます。私がコードを変更して、もしあなたが望むのであれば、それを一番下に置くようにしました。

#header-image { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.header-title { 
 
    color: #000000; 
 
    font-size: 3em; 
 
    font-weight: 700; 
 
    position: absolute; 
 
    bottom: 10%; 
 
    width: 255px; 
 
    margin:auto; 
 
    display:block; 
 
} 
 

 
.bottom-bar { 
 
    display: block; 
 
    height: 25px; 
 
    width: 100%; 
 
    background-color: #007cb0; 
 
} 
 

 
.screen-480 { 
 
    display: none; 
 
} 
 

 
.screen-768 { 
 
    display: block; 
 
} 
 

 
@media only screen and (max-width: 480) { 
 
    .screen-480 { 
 
    display: block; 
 
    } 
 
    .screen-768 { 
 
    display: none; 
 
    } 
 
}

<div id="header-image"> 
 
    <div class="image"> 
 
    <div class="header-title">The quick brown fox jumped over the lazy dog</div> 
 
    <img src="http://via.placeholder.com/480x683.png" width="100%" class="screen- 
 
    480" alt="img" /> 
 
    <img src="http://via.placeholder.com/1028x550.png" width="100%" class="screen- 
 
    768" alt="img" /> 
 
    </div> 
 
    <div class="bottom-bar"></div> 
 
</div>

Answer 2

@media only screen and (max-width: 640px) { 
    .header-title{ 
     bottom:0; 
     top:initial; 
    } 
} 

Answer 3

bottomに何かを整列させるためには、0px.にabsoluteとbottomにこれをpositionを設定することができる絶対的またはいずれか一方に配置される第一の親のbottomにそれを整列します相対。

#header-image { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.header-title { 
 
    color: #000000; 
 
    font-size: 3em; 
 
    font-weight: 700; 
 
    
 
    position:absolute; 
 
    bottom:0; 
 
    width: 255px; 
 
    right: 50px; 
 
    text-align: left 
 
} 
 

 
.bottom-bar { 
 
    display: block; 
 
    height: 25px; 
 
    width: 100%; 
 
    background- color: #007cb0; 
 
} 
 

 
.screen-480 { 
 
    display: none; 
 
} 
 

 
.screen-768 { 
 
    display: block; 
 
} 
 

 
@media only screen and (max-width: 480) { 
 
    .screen-480 { 
 
    display: block; 
 
    } 
 
    .screen-768 { 
 
    display: none; 
 
    } 
 
}

<div id="header-image"> 
 
    <div class="image"> 
 
    <div class="header-title">The quick brown fox jumped over the lazy dog</div> 
 
    <img src="http://via.placeholder.com/480x683.png" width="100%" class="screen- 
 
    480" alt="img" /> 
 
    <img src="http://via.placeholder.com/1028x550.png" width="100%" class="screen- 
 
    768" alt="img" /> 
 
    </div> 
 
    <div class="bottom-bar"></div> 
 
</div>