Положение CSS глификона 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 установил top свойство класса glyphicon. Поэтому вам необходимо установить для свойства top значение auto, чтобы переопределить его.

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

Answer 2

В основном вам необходимо переопределить верхнее свойство, которое уже определено в bootstrap.css.

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