Jquery循环，在滚动图像的顶部放置一个div答案

【问题标题】：Jquery cycle, position a div on top of the scrolling imageJquery循环，在滚动图像的顶部放置一个div
【发布时间】：2012-09-21 21:06:19
【问题描述】：

我正在使用 jquery 插件 jquery.cycle.all.js

基本上我想在图像顶部放置一个 div 菜单。菜单在正确的位置，但由于滑块位于其顶部而无法看到。

谁能帮我把菜单放在滑块的顶部

这是我正在使用的代码，任何帮助将不胜感激。

 <div id= "MiddleContent">

             <div class="Menu">
                        <ul>
                            <li style="background-color:Red;">item</li>
                            <li style="background-color:blue;">item</li>
                            <li style="background-color:green;">item</li>
                            <li style="background-color:yellow;">item</li>
                            <li style="background-color:orange;">item</li>
                        </ul>
                    </div>

                <div class="slideshow">
                    <img src="images/Slider1.png"  alt="" />
                    <img src="images/Slider2.png"  alt="" />
                    <img src="images/Slider3.png"  alt="" />
                    <img src="images/Slider4.png"  alt="" />
                    <img src="images/Slider5.png"  alt="" />
                    <img src="images/Slider6.png"  alt="" />
                </div>
             </div>

这是css

  /************************************/
    /* #MiddleContent                   */
  /************************************/
     div#MiddleContent
 {

   position: relative;
    margin:                 50px 50px 50px 50px;



  }
  div#MiddleContent .slideshow
  {
        overflow: hidden;

float:                  left;
  margin:                 0px 0px 0px 0px;
  padding:                0px 0px 0px 0px;
  }
  div#MiddleContent  .Menu
  {
     position: absolute;
     left: 0px; right: 0; bottom: 0px;  top: 0px;
 min-height: 300px;
 max-width : 250px;
 background: white;
    z-index: 1000px;


    margin:                 0px 0px 0px 0px;
    padding:                0px 0px 0px 0px;
  }

【问题讨论】：

他们的网页上没有将内容放在图像顶部的示例吗？

标签： jquery html css jquery-cycle

【解决方案1】：

你的主要问题是z-index: 1000px;这应该是z-index: 1000;

 div#MiddleContent  .Menu
  {
     position: absolute;
     left: 0px; right: 0; bottom: 0px;  top: 0px;
     min-height: 300px;
     max-width : 250px;
     z-index: 1000;
     margin:    0px 0px 0px 0px;
     padding:   0px 0px 0px 0px;
  }

同时删除背景，使菜单变得透明

【讨论】：

谢谢，简直不敢相信