Question

我有一个简单的问题，我似乎无法找到答案。为什么在我的例子中底部什么都不做父位置设置为相对，子项是绝对的，父项也有高度。我似乎无法弄明白。我知道我可以使用top，但我很好奇为什么底部在这里不起作用。

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

CSS glyphicon位置底部不起作用

2 个答案: