CSS - 私は、次のHTML持っているのdiv

Question

内側のdivのAbolute位置：イメージが上がるのdivボタン、次に小さいとき

<div class="avatar" style="border:1px dotted gray;height:100px;width:100px;float:left;text-align:center;"> 
    <img id="imgLogo" src="images/your-logo-here.png" style="width:auto;height:auto; max-height:100%; max-width:100%;" /> 
    <div class="form-inline" style="padding-top:5px;text-align:left;"> 
     <button type="button" class="btn-primary"><i class="fa fa-folder-open"></i> 
      <input id="btnLogo" type="file" class="upload"> 
     </button> 
     <button type="button" class="btn-primary"> <i class="fa fa-cloud-upload"></i> </button> 
    </div> 
</div> 

問題が表示され、私はそれがいつものDIVに必要その位置にとどまる。

任意の手掛かり？

Answer 1

.parent { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
.fake-sample-img { 
 
    background: red; 
 
    height: 50px; 
 
    width: 100%; 
 
} 
 

 
.buttons { 
 
    position: absolute; 
 
    bottom: -30px; 
 
}

<div class="parent"> 
 
    <div class="fake-sample-img"></div> 
 
    
 
    <div class="buttons"> 
 
    <button>1</button> 
 
    <button>2</button> 
 
    </div> 
 
</div>

あなたの親要素にposition: relativeを置きます。次にposition：絶対値で底面：あなたの子供の値。

Answer 2

一般的な考え方は、イメージがコンテナの上部に絶対的に配置され、ボタンがそのコンテナの下部に絶対的に配置されている間は、コンテナ要素を相対的に配置する必要があるということです。以下のように見えるハイレベルで

、：

.avatar { 
    position: relative; 
} 

#imgLogo { 
    position: absolute; 
    top: 0; 
} 

.form-inline { 
    position: absolute; 
    bottom: 0; 
}