Позиционирование абсолютного ДИВ в родительском DIV

Question

просто нужна помощь здесь мой CSS layout..here мою попытку до сих пор приведена ниже ..

Поскольку мое желание цель хочет позиционирование кнопки поплавка только нижняя часть фонового изображения ... как показано belown ..

и здесь являются HTML и CSS мой до сих пор

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

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

Answer 1

изменить bottom из .bg-image button к "отрицательная половина высоты кнопки", так что это может быть что-то вроде:

.bg-image button {   
    position: absolute; 
    bottom: -28px; 
    right: 4px; 
    color: #fff; 
}