div重叠和隐藏显示

又到周末了。今天又是新的一个月的开始，大家用充满愉快的心情开始这个月的生活吧。

有这么一个需求，就是一个报表模块，这个模块中，有多个报表，一个界面，我们不可能全显示出来，这样一是占位置，二是很乱；三，也就是客户一打开这个模块，看到的是多个报表，不知道焦点放在哪。使用人心情浮躁而不开森。

因此，我今天讲的就是把多个报表重叠在一起。只显示第一个DIV的报表，重叠的都隐藏起来。在查询栏中添加一个报表选项，实现的效果就是当客户一进来时看到的就是第一个报表。想看别的报表时，可以在查询栏中选择相应的报表，点击查询，然后显示出相应的报表。这个我们就可以使用CSS的重叠和隐藏显示了

<div style:"position:relative;">
<div style:"widht:450px;height:400px;position:absolute;left:0;top:0"></div>
<div style:"widht:450px;height:400px;position:absolute;left:0;top:0" display:none;></div>
</div>

实现思路是：在外层的DIV使用相对定位，在里面要重叠的DIV使用的是绝对定位。这样两个DIV绝对定位在一起，就使用重叠，如果你第二个DIV不加dispaly：none；的话，界面中显示的就是后面的DIV的内容，也就是第二个DIV。你给他加个不显示，那只会显示第一个。

由上面的实现思路分析，在查询栏中，也就是给一个判断，如果是要让第2个DIV，就给他显示display:""; 然后让其他的DIV dispaly：none；另外，记得给重叠的DIV的大小要一样，要不然，重叠时而没有隐藏多余的DIV，就会露出来，就算隐藏了，如果大小不同，切换时。不太美观。

版权声明：本文为博主原创文章，未经博主允许不得转载。