Question

我在页面上有一个隐藏列表（opacity:0;visibility:hidden;），这是我的菜单当前所必需的。

我的问题是，即使菜单下拉部分的z-index为-1且内容div的z-index为50，内容div内的文本也只显示在右边的菜单。由于我不想处理的元素可怕的大小调整，css样式display:none不是一个选项。许多Google和Stack Overflow搜索都没有产生任何有用的结果。

我尝试了各种显示设置，包括内联，float:left和其他可能已解决问题的设置，但他们没有。

JSFiddle在这里明确定义了问题（尝试第二个菜单来查看截止点）： http://jsfiddle.net/nimsson/311g9h16/5/

我想知道

a）此功能背后的原因

b）变通方法/解决方案

或两者兼而有之。

谢谢，

nimsson

Answer 1

试试这个：http://jsfiddle.net/311g9h16/7/ 我所做的只是改变你使用定位的方式，并调整宽度以使文本左对齐。

有关位置属性的信息，请转到此处：http://www.w3schools.com/cssref/pr_class_position.asp

#content {
background-color: rgba(204,0,0,0.4);
border: 5px solid rgba(204,51,0,1);
border-radius: 10px;
position: absolute;
bottom: 500px;
color: white;
text-align: left;
width: 500px;
z-index: 50;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;

}

Answer 2

简单的解决方法您在这里：http://jsfiddle.net/311g9h16/6/

我刚刚更改#content {position: absolute}，但为什么display: none不是一个选项？设置下拉列表的高度时，调整大小应该没有问题。

此外，你可以用一些CSS来做这个效果 - 看看：http://www.cssterm.com/css-menus/horizontal-css-menu/simple-drop-down-menu

Answer 3

您可以在#content周围添加另一个div并重新设置包含div的页面，

<div id="background"> 
....  </div>

CSS

#background{
  z-index:-1;
  position: absolute;
  width:100%;
  height:100%;
}

不在具有较低z-index的元素上绘制文本

3 个答案: