2017-01-03 110 views
1

由於菜單上的滑塊重疊,菜單變得隱藏。無法看到我的menus.menu - 教程不可見。即時通訊使用jssora22l這是越來越重疊在我的菜單課程標籤下的「課程」。嘗試與Z指數1000但仍然沒有得到菜單。菜單上重疊的菜單

代碼

https://codepen.io/krishnakernel/pen/YNzppX

<header class="headerpart"> 
    <div class="container"> 
     <div class="logo"> 
     <a href="#"> 
     <img class="abc" src="images-Logo.png" alt="krishnamohan" height="50" width="235" /> 
     </a> 
     </div> 
     <div class="menu" > 
     <nav> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li> 
        <a href="#">Courses</a> 
        <ul> 
        <li><a href="#">Lesson</a></li> 
        <li><a href="#">Practicals</a></li> 
        <li><a href="#">Projects</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="url">login</a></li> 
       <li><a href="url">Sign up</a></li> 
      </ul> 
     </nav> 
     </div> 
    </div> 
</header> 
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;"> 
    <!-- Loading Screen --> 
    <div data-u="loading" style="position: absolute; top: 0px; left: 0px;"> 
     <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div> 
     <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div> 
    </div> 
    <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;"> 
     <div data-p="225.00"> 
     <img data-u="image" src="img/red.jpg" /> 
     <div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;color:#ffffff;line-height:60px;">TOUCH SWIPE SLIDER</div> 
     <div style="position:absolute;top:300px;left:30px;width:480px;height:120px;z-index:0;font-size:30px;color:#ffffff;line-height:38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div> 
     <div data-u="caption" data-t="0" style="position:absolute;top:120px;left:650px;width:470px;height:220px;z-index:0;"> 
      <img style="position:absolute;top:0px;left:0px;width:470px;height:220px;z-index:0;" src="img/c-phone-horizontal.png" /> 
      <div style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0; overflow: hidden;"> 
       <img data-u="caption" data-t="1" style="position:absolute;top:0px;left:0px;width:379px;height:213px;z-index:0;" src="img/c-slide-1.jpg" /> 
       <img data-u="caption" data-t="2" style="position:absolute;top:0px;left:379px;width:379px;height:213px;z-index:0;" src="img/c-slide-3.jpg" /> 
      </div> 
      <img style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0;" src="img/c-navigator-horizontal.png" /> 
      <img data-u="caption" data-t="3" style="position:absolute;top:740px;left:1600px;width:257px;height:300px;z-index:0;" src="img/c-finger-pointing.png" /> 
     </div> 
     </div> 
     <div data-p="225.00" style="display: none;"> 
     <img data-u="image" src="img/purple.jpg" /> 
     </div> 
     <div data-p="225.00" data-po="80% 55%" style="display: none;"> 
     <img data-u="image" src="img/blue.jpg" /> 
     </div> 
     <a data-u="any" href="" style="display:none">Full Width Slider</a> 
    </div> 
    <!-- Bullet Navigator --> 
    <div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1"> 
     <!-- bullet navigator item prototype --> 
     <div data-u="prototype" style="width:16px;height:16px;"></div> 
    </div> 
    <!-- Arrow Navigator --> 
    <span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span> 
    <span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span> 
</div> 

https://codepen.io/krishnakernel/pen/YNzppX

屏幕截圖 slider overlapped on menu

+0

z-index問題,給菜單一個更高的z-index。這始終是父母的錯。 –

+1

你可以讓你的代碼筆工作? – Deep

回答

1
<header class="headerpart" style="z-index:9999;position:relative;"> 
     <div class="container"> 
      <div class="logo"> 
       <a href="#"> 

        <img class="abc" src="images-Logo.png" alt="krishnamohan" height="50" width="235" /> 
       </a> 
      </div> 
      <div class="menu" > 
       <nav> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li> 
          <a href="#">Courses</a> 
          <ul> 
           <li><a href="#">Lesson</a></li> 
           <li> 
            <a href="#"> 
             Practicals 
            </a> 
           </li> 
           <li><a href="#">Projects</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Contact</a></li> 
         <li> 
          <a href="url">login</a> 

         </li> 
         <li><a href="url">Sign up</a></li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </header> 
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;"> 
     <!-- Loading Screen --> 
     <div data-u="loading" style="position: absolute; top: 0px; left: 0px;"> 
      <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div> 
      <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div> 
     </div> 
     <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;"> 
      <div data-p="225.00"> 
       <img data-u="image" src="img/red.jpg" /> 
       <div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;color:#ffffff;line-height:60px;">TOUCH SWIPE SLIDER</div> 
       <div style="position:absolute;top:300px;left:30px;width:480px;height:120px;z-index:0;font-size:30px;color:#ffffff;line-height:38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div> 
       <div data-u="caption" data-t="0" style="position:absolute;top:120px;left:650px;width:470px;height:220px;z-index:0;"> 
        <img style="position:absolute;top:0px;left:0px;width:470px;height:220px;z-index:0;" src="img/c-phone-horizontal.png" /> 
        <div style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0; overflow: hidden;"> 
         <img data-u="caption" data-t="1" style="position:absolute;top:0px;left:0px;width:379px;height:213px;z-index:0;" src="img/c-slide-1.jpg" /> 
         <img data-u="caption" data-t="2" style="position:absolute;top:0px;left:379px;width:379px;height:213px;z-index:0;" src="img/c-slide-3.jpg" /> 
        </div> 
        <img style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0;" src="img/c-navigator-horizontal.png" /> 
        <img data-u="caption" data-t="3" style="position:absolute;top:740px;left:1600px;width:257px;height:300px;z-index:0;" src="img/c-finger-pointing.png" /> 
       </div> 
      </div> 
      <div data-p="225.00" style="display: none;"> 
       <img data-u="image" src="img/purple.jpg" /> 
      </div> 
      <div data-p="225.00" data-po="80% 55%" style="display: none;"> 
       <img data-u="image" src="img/blue.jpg" /> 
      </div> 
      <a data-u="any" href="" style="display:none">Full Width Slider</a> 
     </div> 
     <!-- Bullet Navigator --> 
     <div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1"> 
      <!-- bullet navigator item prototype --> 
      <div data-u="prototype" style="width:16px;height:16px;"></div> 
     </div> 
     <!-- Arrow Navigator --> 
     <span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span> 
     <span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span> 
    </div> 
1

設置一個z索引到頭部。不要忘記將相對位置添加到z-index工作的標題中。

.headerpart{z-index:9999;position:relative} 
+0

我添加的仍然不能正常工作 – Swapna

+0

無法重現您的codepen,請提供更多信息。 – Roy

1

這是z-index的問題給予的z-index值高到菜單欄試試下面的z-index值菜單類

.menu 
{ 
z-index:9999; 
position:relative 
} 
2

這可能是一個z-index的問題許多人指出,你應該添加下列到你的CSS:

.headerpart { 
    position: relative; 
    z-index: 1; 
} 

菜單DIV需要較高的Z索引,要麼position: relative;position: absolute;爲了z-index工作。

.headerpart .menu { 
    z-index: 2; /* higher z-index for the menu div */ 
} 

我也是從你那codepen>.jssorb05 div, .jssorb05 div:hover, .jssorb05 .avoverflow: hidden;的值也可能是潛在的導致了問題的注意。您可能需要將其更改爲overflow: visible;overflow: auto;

由於您沒有爲菜單HTML添加樣式,因此提供的codepen沒有多大幫助。