在父div中定位绝对div

Question

我的css布局需要一些帮助。到目前为止我的尝试如下所示..

由于我的目标是希望将浮动按钮定位在背景图像的底部......如下图所示..

这是html和我的css到目前为止

＆＃13;

＆＃13;

.bg-image {
  position: relative;
}
.bg-image img {
  display: block;
  width: 100%;
  max-width: 1200px;
  /* corresponds to max height of 450px */
  margin: 0 auto;
}
.bg-image button {
  position: absolute;
  bottom: 5px;
  right: 4px;
  color: #FFF;
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div data-role="content" id="content">
  <div class="row">
    <div class='col-xs-12'>
      <div class="bg-image" style="background-color:#CFD8DC;">
        <img id="imgupload" src="//dummyimage.com/1000x200" />
        <button class="ui-btn ui-btn-inline ui-btn-fab ui-btn-raised clr-warning"><i class="zmdi zmdi-camera zmd-2x"></i>
        </button>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将bottom的{​​{1}}更改为“按钮高度的一半”，这可能是这样的：

.bg-image button