如何用另一个div切换div

Question

如何使用css解决这个问题。

当我展开菜单菜单中的内容时，像第二张图片一样展开。这是我的css

.contents {
    /*margin-left: 165px;*/
    /*margin-top: 60px;*/
    position: absolute;
    top: 120px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: scroll;
}

这是我的html内容。

<div class="contents" id="subContents">

</div>

我尝试了位置＆＃39;亲戚＆＃39;但它对我不起作用。 通过使用z-index，就会出现这样的问题。 http://jsfiddle.net/ssaranga/o7sh1j0f/

Answer 1

执行此操作的一种方法是将z-index属性添加到切换菜单类，并根据您拥有的堆叠元素数量为其指定最高值。

z-index指定元素的堆栈顺序。不同的浏览器具有不同的最大最小值。

使用大于实际堆叠元素的数字的优点是，当您想要添加更多元素时，您不必返回并更改z-index值。

请注意，z-index仅适用于定位元素。

例如，您可以执行以下操作：

.toggle-menu{

position:relative
z-index: 999;

}

Answer 2

定位不是您的问题，而且您的菜单div会在后台显示。

您将html元素叠加在一起，并且必须使用CSS z-index propert来调整z轴上的元素。