asp.net - 剑道三指量规——3个量规上下对齐的问题

Question

所以我尝试复制无数其他关于使用 z-index 和定位对齐仪表和 div 的帖子，但到目前为止我仍然无法完成它。我目前有这个（我在 IE 和 chrome 中测试了相同的结果）：

<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 链接到当前输出

Answer 1

将 CSS 定义更改为：

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

Kendo UI 将每个位置定义gauge为相对覆盖您的定义。添加! important到它，我们防止这种情况发生。

这里的例子：http: //jsfiddle.net/OnaBai/wNsRY/