アブソリュートH1タイトル私はH1タイトル有するダウン

Question

スクロールに下方に移動配置：私は下にスクロールする場合、ヘッダが下に向かって移動

.main-heading { 
    /*TEXT ON MAIN PIC*/ 
     position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 2; 
    padding: 0; 
    margin: auto; 
    /*height: 40px;*/ 
    color: rgba(255, 255, 255, 0.80); 
    font-family: 'Open Sans'; 
    font-weight: 300; 
    font-size: 4vw; 
     height: 20%; 
    width: auto; 
    padding: 20px; 
    letter-spacing: 8px; 
    font-variant: small-caps; 
    text-shadow: 0 1px 0 #999999, 0 2px 0 #888888, 
    0 3px 0 #777777, 0 4px 0 #666666, 
    0 5px 0 #555555, 0 6px 0 #444444, 
    0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4), 
    0 9px 10px rgba(0, 0, 0, 0.2); 

} 

：絶対ヘッダ画像上に配置

<h1 class="main-heading"><span class="heading-opaque-background"><%= @post.title %></span></h1> 

を写真の底。表示をインラインに設定しても何も変わりません。

タイトルを画像の上に絶対に置くことができますか？ここで

は、親クラスを表示するには、HTMLのより完全な概要です：

<img class="project-main-pic" src="<%= Citybuilder.ProjectPic.url({@post.project_pic, @post}) %>" /> 
<!--f https://image.slidesharecdn.com/otpphoenixecto-170327125511/95/yurii-bodarev-otp-phoenix-ecto-three-pillars-of-elixir-58-638.jpg?cb=1490619720--> 
<section id="home" class=""> 
    <h1 class="main-heading"><span class="heading-opaque-background"><%= @post.title %></span></h1> 
</section> 
<div class="project-wrapper"> 
    <section id="about" class="sec-about"> 
     <div class="container"> 
      <h1 class="project-title"><%= @post.title %></h1> 
      <!-- ADD TO FORM AND DATABASE --> 
      <div class="row"> 
       <div class="col-sm-6 col-sm-offset-3"> 
        <p class="summary-text"> 
         <%= @post.body %> 
        </p> 
       </div> 
      </div> 
     </div> 
    </section> 

Answer 1

この使用のため

.main-heading{position: fixed; top: 0; left: 0; right: 0;}

か、このための特別なプラグインを使用して、彼は再び ですsample

Answer 2

ここで確認してください：https://jsbin.com/cezidexase/1/edit?html,css,output

.main-heading { 
    margin: auto; 
    /*height: 40px;*/ 
    color: rgba(255, 255, 255, 0.80); 
    font-family: 'Open Sans'; 
    font-weight: 300; 
    font-size: 4vw; 
     height: 20%; 
    width: auto; 
    padding: 20px; 
    letter-spacing: 8px; 
    font-variant: small-caps; 
    text-shadow: 0 1px 0 #999999, 0 2px 0 #888888, 
    0 3px 0 #777777, 0 4px 0 #666666, 
    0 5px 0 #555555, 0 6px 0 #444444, 
    0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4), 
    0 9px 10px rgba(0, 0, 0, 0.2); 

}