简单的滚动按钮位置不听我的意思

Question

您好我正在使用bootstrap创建html模板，我在使用此按钮时遇到问题。我需要把它放在图片的底部。我认为我的方法正确，但它不起作用。

我该如何解决？当我改变屏幕重新定位时，如何使它固定在相同的位置（响应）:)

我知道我的照片不是整个高度或其他东西。它只需要col-xs-12的高度，当我想在显示相同内容之后创建内容时，在图片中间。

HTML：

<div class="container intro slider">
      <img class="img-responsive" src="images/as_royal-3final.jpg" alt="sliderimage">
      <div class="col-xs-12 slider">
        <h1 class="row sliderh1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, tempore</h1>
        <p class="row sliderp">Lorem ipsum dolor sit amet.</p>
        <a href="#about"><span class="glyphicon glyphicon-menu-down"></span></a>
      </div>

    </div><!-- /.intro -->

CSS：

.intro {
  background-size: cover;
}

.img-responsive {
  position: absolute;
  z-index: -1;
}

.row.sliderh1 {
  text-align: center;
  margin-top: 20%;
  color: #FFF;
}

.row.sliderp {
  text-align: center;
  font-size: 24px;
  color: #fff;
}

.glyphicon.glyphicon-menu-down {
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  left:50%;
  margin: auto;
  color:#eee;
  bottom: 10px;

}

.glyphicon.glyphicon-menu-down:active,
.glyphicon.glyphicon-menu-down:hover,
.glyphicon.glyphicon-menu-down:focus {
  text-decoration: none;
  color: #eee;
}

小提琴： https://jsfiddle.net/DTcHh/

Answer 1

您需要将按钮放在屏幕底部，然后您必须将按钮放在div之外。

更新了Css

.glyphicon.glyphicon-menu-down {
  position: absolute;
  left:50%;
  margin: auto;
  color:red;
  top: auto;//add this extra
  bottom: 10px;    
}

更新了HTML

<div class="container intro slider">
  <div class="black">
  </div>
  <div class="col-xs-12 slider">
    <h1 class="row sliderh1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, tempore</h1>
    <p class="row sliderp">Lorem ipsum dolor sit amet.</p>        
  </div>

</div><!-- /.intro -->
<a href="#about"><span class="glyphicon glyphicon-menu-down">button</span></a>

将标签放在div的外面。