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 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;    
}

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

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

剑道测量仪有三个指针 - 将3个测量仪对准彼此的问题

1 个答案: