Question

悬停产品或示例以查看问题。也许有人在过去遇到过这个问题并且确切地知道出了什么问题。我通过css代码完成了我的最好，菜单和滑块将定位从绝对替换为相对等等。当我将图片定位从绝对更改为继承时，几乎得到了我的答案但是还不够，这部分是诀窍。简而言之，我被困住了，所以任何其他想法都会受到赞赏。

.lof-slidecontent { position:relative; overflow:hidden; border:#F4F4F4 solid 1px;}
.lof-slidecontent .preload{ height:100%; width:100%; position:absolute; top:0;   left:0;    z-index:100000; text-align:center; background:#FFF}
.lof-slidecontent .preload div{ height:100%;    width:100%; background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}

.lof-slidecontent  .sliders-wrapper{    position:relative;  height:100%;    width:900px;    z-index:3px;    overflow:hidden; }
.lof-slidecontent  ul.sliders-wrap-inner{overflow:hidden;   background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;  padding:0px;    margin:0;   position:relative;  overflow:hidden;}
.lof-slidecontent  ul.sliders-wrap-inner li{overflow:hidden;    padding:0px;margin:0px; float:left; position:inherit;}
.lof-slidecontent  .lof-opacity  li{position:absolute;  top:0;  left:0;     float:inherit; }


.lof-slidecontent  .navigator-content {position:absolute; bottom:10px; right:10px;
background:url(../images/transparent_bg.png) repeat;
padding:5px 0px;
   }
.lof-slidecontent  .navigator-wrapper{  position:relative;  z-index:10;
height:180px;
width:310px;
overflow:hidden;
color:#FFF;
float:left
    }

这里的某个地方可能是问题，也许是z-index？

这是完整的代码和问题：

http://jsfiddle.net/melbourne/vjG56/

Answer 1

将position:和z-index添加到菜单中，如下所示：

.menu, .menu ul {
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    z-index: 999;
}

菜单和滑块可见性问题

1 个答案: