CSSのグリフコンの位置のボトムが正しく動作しない

Question

私は答えがわからないという単純な質問があります。私の例では、ボトムは何もしません。親の位置は相対に設定され、子は絶対、親にも高さが設定されます。私はそれを把握していないようだ。私はトップを使うことができますが、ボトムがここではうまくいかない理由について興味がありました。

.profile-image-container { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: yellow; 
 
} 
 

 
.profile-image-container .glyphicon { 
 
    position: absolute; 
 
    bottom: 50px; 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="profile-image-container"> 
 
    <i class="glyphicon glyphicon-pencil"></i> 
 
</div>

Answer 1

bootstrap.min.cssはglyphiconクラスのtopプロパティを設定しています。そのため、topプロパティをautoに設定する必要があります。

.profile-image-container .glyphicon { 
    position: absolute; 
    bottom: 50px; 
    top: auto; 
} 

Answer 2

基本的には、すでにbootstrap.cssで定義されているtopプロパティを上書きする必要があります。

.profile-image-container { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: yellow; 
 
} 
 
/* define your style more specifically */ 
 
i.glyphicon { 
 
    top: auto; 
 
    position: absolute; 
 
    bottom: 50px; 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="profile-image-container"> 
 
    <i class="glyphicon glyphicon-pencil"></i> 
 
</div>