html - 绝对定位的 h1 标题在向下滚动时向下移动

Question

我有一个 h1 标题:

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

绝对定位在标题图片上:

.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);

}

当我向下滚动时，标题向下移动到图片底部。将显示设置为内联不会改变任何内容。

如何让标题绝对定位在图片上？

这是一个更完整的 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

在这里查看: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);

}