別の絶対配置された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; 
} 

私の唯一の合併症が三角形は絶対に滞在する必要があるということです。 グリフコンを三角形の中央に配置するにはどうすればよいですか？

、あなたがglyphicon

第二のCSSで設定されたトップを上書きしないように、あなたのCSSセレクタの特異性は、十分に特定ではありませんまず、あなたのトップ：

Answer 1

あなたはDivの外にスパンを置くことができます。絶対的な位置付けでうまくいくでしょう！ :)

Answer 2

あなたは問題のカップルを持っています三角形を描くために枠線を使用しているので、マイナスにする必要があります（上の方が実際の三角形の範囲外になるようにします）。

は、以下の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

スパン：-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; 
}