Question

我正在卡片上画一个三角形，并想在它上面放置一个glyphicon。三角形和伟大的，字形显示......但总是在下面，永远不会在上面。我尝试用相对潜水包裹glpyh并使用顶部和左侧定位使字形绝对，但都无济于事。

基础知识是（jsfiddle here https://jsfiddle.net/joshuaohana/4pgjcr47/）：

<div class="triangle">
  <span class="glyphicon glyphicon-exclamation-sign"></span>          
</div>

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: blue transparent transparent transparent;
}

span {
  position: absolute;
  bottom: 50px;
  left: 20px;
}

我唯一的复杂因素是三角形需要保持绝对。如何将glyphicon定位在三角形的中间？

Answer 1

您可以使用负top值： https://jsfiddle.net/4pgjcr47/8/

.triangle > span {
  position: absolute;
  bottom: 50px;
  left: 20px;
  top: -65px;
  color: white;
}

Answer 2

你有几个问题：

首先，你的css选择器的特异性不够具体，所以你不要用css为glyphicon覆盖顶部设置

其次，当您使用边框绘制三角形时，顶部应为负值（因此顶部位于实际三角形div之外）。

尝试下面的css，它应该解决这两个问题：

span.glyphicon {      // more specific selector
  position: absolute;
  top: -65px;         // move up over border
  left: 20px;
}

Updated Fiddle

More information on css specificity

Answer 3

你可以把Span放在Div之外，你的绝对定位会很好！：）

Answer 4

<div class="triangle">
  <span class="glyphicon glyphicon-exclamation-sign"></span>          
</div>

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: blue transparent transparent transparent;
}

span {
  position: absolute;
  top: 20px;
  left: 20px;
}

永远不要使用绝对的div和div！

Answer 5

跨度：使用负值修改顶部位置，其中-85px对应于容器div的大小。例如，使用-70px。

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: blue transparent transparent transparent;
}

span.glyphicon-exclamation-sign {
  position: absolute;
  bottom: 50px;
  left: 20px;
  top: -70px;
  color: #FFF;
}

如何将bootstrap glyphicon定位在另一个绝对定位的div

5 个答案: