导航 div 在弹性滑块上不可见

  • 本文关键字:div 导航 html css
  • 更新时间 :
  • 英文 :


导航div 在弹性滑块上不可见div 虽然我设置了更大的 z 索引。请帮忙。

我在这里隔离了问题:

/*! CSS Used from: http://localhost:59746/Content/css/normalize.css */
div,span,h2,a,img,strong,ul,li,input,select{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;}
ul,li{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
strong{font-weight:bold;}
img{height:auto;}
input:focus,select:focus{outline:none;}
input[type="text"],input[type="password"]{-webkit-appearance:none;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{display:inline-block;}
.clearfix{display:block;}
/*! CSS Used from: http://localhost:59746/Content/images/content_images.sprite.css */
.content_images{background-image:url(http://localhost:59746/Content/images/content_images.sprite.png);background-repeat:no-repeat;display:inline-block;}
.content_images.card-number-img{width:30px;height:31px;background-position:-10px -97px;}
/*! CSS Used from: http://localhost:59746/Content/css/global.css */
h2{color:#0e1714;}
h2{font-size:3em;font-weight:normal;line-height:112%;margin-bottom:11px;}
a{color:#FF6B03;}
a:hover{text-decoration:none;}
input[type="text"],input[type="password"]{font-size:1.3em;color:#565656;}
input[type="text"]{border:1px solid #f0f0f0;padding:11px 10px;box-shadow:0px 2px 3px 1px #dadada inset;-moz-box-shadow:0px 2px 3px 1px #dadada inset;-webkit-box-shadow:0px 2px 3px 1px #dadada inset;}
input[type="password"]{border:1px solid #f0f0f0;padding:11px 10px;box-shadow:0px 2px 3px 1px #dadada inset;-moz-box-shadow:0px 2px 3px 1px #dadada inset;-webkit-box-shadow:0px 2px 3px 1px #dadada inset;}
.btn{color:#fff;background:#ff6b03;font-weight:bold;font-size:1.5em;padding:4px 14px;box-shadow:1px 1px 1px 0 #8A8A8A;-moz-box-shadow:1px 1px 1px 0 #8A8A8A;-webkit-box-shadow:1px 1px 1px 0 #8A8A8A;}
.page{width:100%;max-width:1160px;margin:0 auto;position:relative;}
.text-color{color:#fc2222;}
.card-number{position:absolute;top:14px;right:4px;width:30px;height:31px;color:#000;font-size:1.4em;font-weight:bold;padding-top:5px;}
.products-worth .card-number,.worth-headding,.products-worth .sort-by{float:left;}
.worth-headding{display:inline-block;}
.order-bg{box-shadow:0px 11px 5px -3px #e0e0e0;-moz-box-shadow:0px 11px 5px -3px #e0e0e0;-webkit-box-shadow:0px 11px 5px -3px #e0e0e0;}
.products-worth{-webkit-transform:translateZ(0);}
.products-worth{padding:24px 7px 10px;}
.worth-headding{font-size:1.3em;margin-left:41px;margin-right:2px;padding-top:5px;}
.products-worth .card-number{height:25px;left:14px;margin-right:5px;text-align:center;top:25px;}
.order-bg{background:url(http://localhost:59746/Content/images/total-bg.jpg) repeat-x top;width:100%;}
.box-content .products-worth{margin-bottom:20px;}
.products-worth .sort-by{margin-right:7px;}
.box-content{width:100%;background:#fff;}
.box-content .worth-headding{margin-right:30px;}
.box-content .flexslider .slides > li{width:92px!important;height:92px;padding:0 26px;}
.box-content .card-number{top:23px;left:437px;}
.flex-viewport{z-index:9;}
.box-content .flex-direction-nav{display:block;}
.order-bg ul{padding-left:298px;}
.order-bg li{float:left;padding:18px 28px 18px 15px;border-left:1px solid #e5e6e6;border-right:1px solid #e5e6e6;}
.order-bg li img,.order-bg li a{float:left;}
.order-bg li img{margin:0 10px;}
.order-bg li a{font-size:1.4em;padding:9px 0 0 0;font-weight:bold;}
.slider-menu{display:none;box-shadow:1px 1px 5px 0px #ccc;-moz-box-shadow:1px 1px 5px 0px #ccc;-webkit-box-shadow:1px 1px 5px 0px #ccc;position:absolute;top:57px;background:#fff;left:22px;}
.slider-menu li{padding:10px 20px;border-bottom:1px solid #dbdbdb;text-align:center;}
.slider-menu li a{font-size:1.4em;line-height:131%;}
.slider-menu li:hover a{color:#fff;}
.slider-menu li:hover{background:#ff6b03;}
.box-content .flexslider .slides > li:hover{position:relative;}
.slider-menu-content{background:#FFFFFF;display:block;position:absolute;top:54px;width:200px;z-index:9999;box-shadow:1px 1px 5px 0px #ccc;-moz-box-shadow:1px 1px 5px 0px #ccc;-webkit-box-shadow:1px 1px 5px 0px #ccc;}
.slider-menu-content li{padding:10px;border-bottom:1px solid #dbdbdb;text-align:left;}
.slider-menu-content li a{font-size:1.4em;line-height:131%;display:block;}
.slider-menu-content-product-title{color:Gray;}
.slider-menu-content li:hover a{color:#fff;}
.slider-menu-content li:hover{background:#ff6b03;}
.img_price_notif{float:right;margin-right:10px!important;z-index:999;position:absolute;width:16px!important;}
@media only screen and (max-width: 920px){
.order-bg li{width:190px;}
.order-bg li img{display:none;}
}
@media only screen and (max-width: 1073px){
.sort-by{margin-right:50px;}
}
/*! CSS Used from: http://localhost:59746/Content/css/style.css */
#carousel .flex-viewport{margin-bottom:-10px;}
.box-content #carousel li{font-size:1.3em;text-align:center;}
.price-Choose h2{font-size:1.4em;font-weight:bold;letter-spacing:-1px;}
.price-Choose h2{border-bottom:1px solid #dbdbdb;padding-bottom:17px;}
.enter-email{font-size:1.3em;line-height:173%;}
.enter-email .btn{float:right;font-size:115%;}
.email-descp{color:#616161;font-size:102%;font-style:italic;line-height:71%;margin-top:25px;}
.sort-by strong{padding-top:3px;font-size:1.3em;float:left;}
.sort-by{float:right;clear:both;}
.sort-by strong{padding-left:40px;}
.sort-by select{border:1px solid;margin-top:-6px;padding:5px 7px;width:150px;}
.close span{font-size:131%;}
.close span{color:#0e1714;}
.close span{padding-right:10px;display:inline-block;}
.close{float:right;width:80px;cursor:pointer;}
.close-btn{background-position:-2px -178px!important;width:20px;height:21px;display:block;float:right;margin-top:-4px;}
.close-btn.add{padding-right:6px;}
.flex-direction-nav{display:none;}
.sbHolder{border:1px solid #dadada;float:right;font-family:sans-serif;font-size:12px;font-weight:normal;height:27px;margin-top:-4px;position:relative;width:155px;}
.sbSelector{display:block;height:30px;left:0;line-height:30px;outline:none;overflow:hidden;position:absolute;text-indent:10px;top:0;width:183px;}
.sbSelector:link,.sbSelector:visited,.sbSelector:hover{color:#0e1714;outline:none;text-decoration:none;font-size:114%;}
.sbToggle{background:url(http://localhost:59746/Content/images/select-icons.png) 0 -119px no-repeat;display:block;height:30px;outline:none;position:absolute;right:0;top:0;width:30px;}
.sbToggle:hover{background:url(http://localhost:59746/Content/images/select-icons.png) -120px no-repeat;}
.sbToggleOpen{background:url(http://localhost:59746/Content/images/select-icons.png) 0 -19px no-repeat;}
.sbToggleOpen:hover{background:url(http://localhost:59746/Content/images/select-icons.png) 0 -69px no-repeat;}
.sbOptions{background:#fff;border:solid 1px #dadada;list-style:none;left:-1px;margin:0;padding:0;position:absolute;top:30px;width:185px;z-index:999;overflow-y:auto;}
.sbOptions li{padding:0 7px;}
.sbOptions a{border-bottom:solid 1px #dcdcdc;display:block;outline:none;padding:7px 0 7px 3px;}
.sbOptions a:link,.sbOptions a:visited{color:#0e1714;text-decoration:none;}
.sbOptions a:hover,.sbOptions a:focus,.sbOptions a.sbFocus{color:#FF6B03;}
.close-btn{background:url(http://localhost:59746/Content/images/sprite-2.png) left top no-repeat;}
.product-title{color:rgb(14,23,20);font-size:1.3em;font-weight:bold;float:left;margin-top:3px;margin-bottom:20px;}
.form-head{overflow:hidden;display:block;}
#carousel li{width:auto!important;}
.fl{float:left;}
.fr{float:right;}
.flexslider .slides li{backface-visibility:hidden;}
/*! CSS Used from: http://localhost:59746/Content/js/flexslider_2_6_1/flexslider.css */
.slides,.slides > li,.flex-direction-nav{margin:0;padding:0;list-style:none;}
.flexslider{margin:0;padding:0;}
.flexslider .slides > li{display:none;-webkit-backface-visibility:hidden;}
.flexslider .slides img{width:100%;display:block;}
.flexslider .slides:after{content:"020";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .flexslider .slides{display:block;}
.flexslider{margin:0 0 60px;background:#fff;border:4px solid #fff;position:relative;zoom:1;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:'' 0 1px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:'' 0 1px 4px rgba(0, 0, 0, 0.2);-o-box-shadow:'' 0 1px 4px rgba(0, 0, 0, 0.2);box-shadow:'' 0 1px 4px rgba(0, 0, 0, 0.2);}
.flexslider .slides{zoom:1;}
.flexslider .slides img{height:auto;-moz-user-select:none;}
.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}
.flex-direction-nav{*height:0;}
.flex-direction-nav a{text-decoration:none;display:block;width:40px;height:40px;margin:-20px 0 0;position:absolute;top:50%;z-index:10;overflow:hidden;opacity:0;cursor:pointer;color:rgba(0, 0, 0, 0.8);text-shadow:1px 1px 0 rgba(255, 255, 255, 0.3);-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.flex-direction-nav a:before{font-family:"flexslider-icon";font-size:40px;display:inline-block;content:'f001';color:rgba(0, 0, 0, 0.8);text-shadow:1px 1px 0 rgba(255, 255, 255, 0.3);}
.flex-direction-nav a.flex-next:before{content:'f002';}
.flex-direction-nav .flex-prev{left:-50px;}
.flex-direction-nav .flex-next{right:-50px;text-align:right;}
.flexslider:hover .flex-direction-nav .flex-prev{opacity:0.7;left:10px;}
.flexslider:hover .flex-direction-nav .flex-prev:hover{opacity:1;}
.flexslider:hover .flex-direction-nav .flex-next{opacity:0.7;right:10px;}
.flexslider:hover .flex-direction-nav .flex-next:hover{opacity:1;}
@media screen and (max-width: 860px){
.flex-direction-nav .flex-prev{opacity:1;left:10px;}
.flex-direction-nav .flex-next{opacity:1;right:10px;}
}
/*! CSS Used from: http://localhost:59746/Content/css/responsive.css */
@media only screen and (min-width: 768px) and (max-width: 1160px){
.content_images.card-number-img{width:26px;height:18px;background-position:-11px -97px;}
.card-number{top:17px;right:-13px;}
.order-bg ul{padding-left:0;}
.order-bg li{width:33%;text-align:center;padding:18px 0px 18px 0px;}
.order-bg li a{float:none;display:inline-block;padding:0;}
.order-bg li img{float:none;vertical-align:middle;display:inline-block;}
.fl{width:42%;}
.fl:nth-child(2){margin-left:2%!important;}
}
@media only screen and (min-width: 320px) and (max-width: 767px){
.card-number{top:-2px;right:-8px;font-size:1.2em;}
.order-bg{background-size:contain;}
.order-bg li{min-height:66px;padding:18px 0px 18px 0px;width:32.6%;text-align:center;}
.order-bg li img{display:block;float:none;margin:0 auto;}
.order-bg li a{float:none;display:block;font-size:1.2em;}
.order-bg ul{padding-left:0;}
.box-content .card-number{top:52px;left:170px;}
.close{padding-top:5px;}
.sbHolder{position:absolute;top:30px;left:0;}
.products-worth .sort-by{position:relative;margin-right:0;margin-left:0;}
.fl{margin-right:6%;}
.worth-headding{padding-top:5px;}
.box-content .worth-headding{margin-left:0;margin-right:0;display:none;}
.sort-by strong{padding-left:0;}
.box-content .products-worth{margin-bottom:30px;z-index:99;}
.worth-headding{margin-left:23px;}
.products-worth .card-number{left:0;top:13px;}
.products-worth{padding:13px 7px 10px;}
.content_images.card-number-img{width:27px;height:18px;}
.fl{float:none;margin-right:0;margin-left:0!important;}
.products-worth{padding:10px 0px 10px;}
#schranka_items_count_in_list{left:192px;top:39px;display:none;}
.sort-by{margin-right:5px;}
.flexslider .slides li{margin-right:-6px;}
.products-worth .sbHolder{top:0;left:111px;width:117px;}
}
/*! CSS Used fontfaces */
@font-face{font-family:'flexslider-icon';src:url(http://localhost:59746/Content/js/flexslider_2_6_1/fonts/flexslider-icon.eot);src:url(http://localhost:59746/Content/js/flexslider_2_6_1/fonts/flexslider-icon.eot#iefix) format('embedded-opentype'), url(http://localhost:59746/Content/js/flexslider_2_6_1/fonts/flexslider-icon.woff) format('woff'), url(http://localhost:59746/Content/js/flexslider_2_6_1/fonts/flexslider-icon.ttf) format('truetype'), url(http://localhost:59746/Content/js/flexslider_2_6_1/fonts/flexslider-icon.svg#flexslider-icon) format('svg');font-weight:normal;font-style:normal;}
<html>
  <body>
    <div class="box-content" id="box-content-schranka" style="display: block;">      
      <div class="page">
        <div class="products-worth clearfix">
          <div class="sort-by">
          <strong>List:</strong> 
          <select id="listNames" tabindex="1" style="position: relative; display: none;" sb="88543365">
            <option value="-1">basic</option>
            <option value="telky">normal</option>
            <option value="-4">extended</option>
          </select>
          <div id="sbHolder_88543365" class="sbHolder" tabindex="1">
          <a id="sbToggle_88543365" href="#" class="sbToggle sbToggleOpen" /> 
          <a id="sbSelector_88543365" href="#" class="sbSelector sbFocus">základný</a>
          <ul id="sbOptions_88543365" class="sbOptions" style="top: 30px; max-height: 369px;">
            <li>
              <a href="#-1" rel="-1" class="sbFocus">základný</a>
            </li>
            <li>
              <a href="#telky" rel="telky">telky</a>
            </li>
            <li>
              <a href="#-4" rel="-4">navštívené</a>
            </li>
          </ul></div></div>
          <!--sort-by-->
        </div>
        <!--slider-menu-content-->
        <div id="carousel" class="flexslider">
          <div class="flex-viewport" style="overflow: hidden; position: relative;">
            <ul class="slides" style="width: 2400%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
              <li class="flex-active-slide" style="width: 68px; margin-right: 5px; float: left; display: block;">
              <a href="javascript:void(0)" onclick="window.location=&#39;/vysavace/philips-fc-7088-01&#39;;">
                <img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&amp;k=1063117&amp;t=1" draggable="false" />
              </a>
              <br />363.89
              </li>
              <li style="width: 68px; margin-right: 5px; float: left; display: block;">
              <a href="javascript:void(0)" onclick="window.location=&#39;/vysavace/bissell-17132-crosswave&#39;;">
                <img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&amp;k=2149770&amp;t=1" draggable="false" />
              </a>
              <br />278.90
              </li>
              <li style="width: 68px; margin-right: 5px; float: left; display: block;">
              <a href="javascript:void(0)" onclick="window.location=&#39;/mixery-slahace/bosch-msm-67160&#39;;">
                <img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&amp;k=916735&amp;t=1" draggable="false" />
              </a>
              <br />39.90
              </li>
              <li style="width: 68px; margin-right: 5px; float: left; display: block;">
              <a href="javascript:void(0)" onclick="window.location=&#39;/sendvicovace/eta-4156-90000-tampo&#39;;">
                <img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&amp;k=1127547&amp;t=1" draggable="false" />
              </a>
              <br />37.67
              </li>
              <li style="width: 68px; margin-right: 5px; float: left; display: block;">
              <a href="javascript:void(0)" onclick="window.location=&#39;/susicky/electrolux-ew8h358sc&#39;;">
                <img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&amp;k=2326939&amp;t=1" draggable="false" />
              </a>
              <br />472.77
              </li>
              <li style="width: 68px; margin-right: 5px; float: left; display: block;">
              <a href="javascript:void(0)" onclick="window.location=&#39;/susicky/electrolux-ew8h458bc-bielizne&#39;;">
                <img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&amp;k=2163906&amp;t=1" draggable="false" />
              </a>
              <br />489.00
              </li>
              <li style="width: 68px; margin-right: 5px; float: left; display: block;">
              <a href="javascript:void(0)" onclick="window.location=&#39;/mixery-slahace/bosch-msm-67170&#39;;">
                <img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&amp;k=925944&amp;t=1" draggable="false" />
              </a>
              <br />46.70
              </li>              
            </ul>
          </div>
          <ul class="flex-direction-nav">
            <li class="flex-nav-prev">
              <a class="flex-prev" href="#" />
            </li>
            <li class="flex-nav-next">
              <a class="flex-next" href="#" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

试试这个

.products-worth {
    position: relative;
    z-index: 99;
}

最新更新