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

}

Answer 2

用于此用途

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

或为此使用特殊插件，他是一个 sample

向下滚动时，绝对定位的h1标题向下移动

2 个答案: