CSS 字形位置底部不起作用

Question

我有一个简单的问题，我似乎无法找到答案。为什么底部在我的示例中什么都不做。 parent位置设置为relative，child是absolute，parent也有height。我似乎无法弄清楚。我知道我可以只使用 top，但我很好奇为什么 bottom 在这里不起作用。

.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设置了字形class的top属性。所以你需要将 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>

CSS 字形位置底部不起作用

CSS glyphicon position bottom not working

html

css

glyphicons