如何將自舉圖形定位在另一個絕對定位的div頂部

Question

我正在繪製卡上的三角形並希望在其上放置一個圖形。三角形和偉大的，和字形顯示...但總是低於，永遠不會在頂部。我曾嘗試用相對潛水包裹glpyh，並使用top和left定位來使glyph絕對化，但都無濟於事。

一些基本的內容（這裏的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

你可以把跨度放在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

跨度：修改與負值的頂部位置，其中該-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; 
}