Css 如何将引导图示符图标放置在另一个绝对定位的div上

我正在一张卡片上画一个三角形，想在上面放一个字形图标。三角形和巨大的，字形显示出来。。。但总是在下面，从不在上面。我尝试过将glpyh包装成一个相对俯冲，并使用顶部和左侧定位使glyph绝对，但都没有效果

基本内容包括（这里是jsfiddle）：

.三角形{
位置：绝对位置；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：85px 85px 0；
边框颜色：蓝色透明；
}
跨度{
位置：绝对位置；
底部：50px；
左：20px；
}

我唯一的麻烦是三角形必须保持绝对。

---

如何将glyphicon定位在三角形中间？

您有几个问题：

首先，css选择器的特殊性不够具体，因此您不会覆盖css为glyphicon设置的顶部

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

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

span.glyphicon{//更具体的选择器
位置：绝对位置；
顶部：-65px；//越过边界向上移动
左：20px；
}

.三角形{
位置：相对位置；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：85px 85px 0；
边框颜色：蓝色透明；
}
跨度{
位置：绝对位置；
顶部：20px；
左：20px；
}

---

绝对不要使用div和div

您可以使用负值

top

值：

---

Span：使用负值修改顶部位置，其中-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;
}

---

您可以将跨度放在Div之外，它将和您的绝对定位配合使用

你需要跨距进入Div吗？哈哈，不，现在我觉得自己很笨，谢谢@LeonFreire:）现在工作得很好，远离Div，像平常一样定位它。如果你想把这个作为一个答案，我会接受的谢谢！贴出答案！：）为什么“永远不要使用div和div，它们都是绝对的”？如果关闭按钮绝对位于绝对定位的模式弹出窗口的右上角，该怎么办？从绝对到相对的改变并没有任何作用——最初的问题仍然存在

<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;
}

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

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