Как разместить бутстрап-глификон поверх другого абсолютного положения div

Question

Я рисую треугольник на карте и хочу поместить глификон поверх него. Треугольник и большой, и появляется знак ... но всегда ниже и никогда не сверху. Я попытался обернуть glpyh в относительном погружении и сделать глиф абсолютным, используя верхнее и левое позиционирование, все безрезультатно.

Основы являются (jsfiddle здесь 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; 
} 

Моя единственная сложность заключается в том, что треугольник должен оставаться абсолютным. Как позиционировать глификон внутри середины треугольника?

Answer 1

Вы можете поместить Span за пределы Div, и он будет отлично работать с вашим абсолютным позиционированием! :)

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

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

Вы можете использовать отрицательное значение top: https://jsfiddle.net/4pgjcr47/8/

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

Answer 5

Span: Изменить верхнее положение с отрицательными значениями, где -85px соответствует размеру контейнера дел. Для примера используйте -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; 
}