有三個指針的劍道測量儀 - 對齊3個測量儀彼此之間的問題

Question

所以我試圖複製無數其他帖子關於使用z-index和定位在對方頂部對齊量表和div，但至今仍然沒有能夠完成它。 我現在有這個（IVE在IE測試，並與鉻相同的結果）：

<div id="gauges"> 
    <div id="loggedInGauge"> //gauge creation code </div> 
    <div id="loggedOutGauge"> //gauge creation code </div> 
    <div id="onBreakGauge"> //gauge creation code </div> 
</div> 
<style> 

      #gauges { 
       position: relative; 

      } 
      #loggedInGauge, #loggedOutGauge, #onBreakGauge { 

       position: absolute; 
       top: 0px; 
       left: 0px; 
       right: 0px; 
       bottom: 0px; 
       width: 200px; 
       height: 200px;  
      } 

      #loggedOutGauge { 

       z-index: 10; 
      } 
      #onBreakGauge { 
       z-index: 20; 
      } 

</style> 

誰能幫助讓對方頂部的儀表，使它看起來像一個壓力錶個三分球？

下面是電流輸出是什麼：Imgur link to current output

Answer 1

更改CSS定義：

#loggedInGauge, #loggedOutGauge, #onBreakGauge { 
    position: absolute !important; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    width: 200px; 
    height: 200px;  
} 

劍道UI定義的位置POR每個gauge爲相對覆蓋你的定義。將! important添加到它，我們可以防止發生這種情況。

示例：http://jsfiddle.net/OnaBai/wNsRY/