使用Z-index如何实现界面的跳转？

在写一个含有echarts的图表的时候，发现如果使用display的时候界面虽然可以实现跳转但是，跳转后界面中的图标宽度一直与自己预期的不符合，不管怎样设计，宽度一直都是100px;最后经过尝试使用Z-index属性，完美实现：

在使用Z-index属性是要注意一下几个方面：

• 把要实现用Z-index跳转的界面放到一个父div中，再通过设置子div的Z-index的不同的值，以及及时的配合JS代码来实现界面的跳转
• 子div的position属性应给设置为absolute
• 子div的background-color应该设定颜色，否则的话可能会出现重叠的情况出现，既不同的子div重叠出现，但是z-index高的，遮盖Z-index低的，这就像是如果我们在一个地方嗮东西，嗮的第一层假如是苹果，他的背景色就是大地，他的Z-index值低，如果在向上边撒一层山楂再有山楂的地方就会遮住大地和苹果这是就可以看到大地，苹果和山楂，但是如果要是在苹果上先铺上一层东西既设置了background-color，再撒山楂那样的话就只能看到你铺的那个东西和你撒的山楂了。
• position设置为absolute的时候如果使用百分比的形式来设置子div的宽和高的时候就会发现与预期不符合，关于这个问题的解释，在另一篇博客中给出解释

相关的HTML代码：

<div class="chartsdiv">
                    <div id="echarts1">

                    </div>
                    <div id="echarts2">

                    </div>

</div>

相关的CSS设置代码：

.chartsdiv{
    width:100%;
    height:450px;
    z-index: 3;
}
#echarts1{
    width:98%;
    height:450px;
    position:absolute;
    z-index:12;
    background-color: white;
}
#echarts2{
    width:98%;
    height:450px;
    position:absolute;
    z-index:5;
    background-color: white;
}

 相关的JS代码实现（.databutton3,.databutton4;是我在项目找那个使用的相关按钮的class，我使用的是：博客链接）：

$(function() {
    $(".databutton3").click(function() {
        document.getElementById("echarts1").style.zIndex=12;
        document.getElementById("echarts2").style.zIndex=5;
    });
    $(".databutton4").click(function() {
        document.getElementById("echarts1").style.zIndex=5;
        document.getElementById("echarts2").style.zIndex=12;
    });

});