如何将特定元素带到另一个元素之上

时间：2016-06-19 12:06:54

标签： html css z-index

当我将鼠标悬停在特定菜单选项上时，幻灯片显示元素会阻止子菜单选项。请参考下面的截图

enter image description here

以红色突出显示子菜单选项被幻灯片显示阻止。当我将幻灯片div的z-index值更改为负值时，它会完全消失，否则会阻止子菜单。

如果需要任何其他信息，请告诉我。

Menu.css 

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul:after, header:after, #main:after {
  clear: both;
  content: "";
  display: table;
}
ul:before, header:before, #main:before {
  content: "";
  display: table;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Raleway";
  font-weight: 400;
  color: #34495E;
  background: #f0f0f0;
}

header {
  background: #2d3f51;
  padding: 0 7%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  box-shadow: 0 2px 5px rgba(68, 68, 68, 0.3);
  -webkit-perspective: 1555px;
  -moz-perspective: 1555px;
  perspective: 1555px;
}

#main {
  padding: 2.5em 7%;
}
#main .efx-info {
  width: 49%;
  float: left;
  padding: 2em 1em;
  font-weight: 700;
  border-radius: .2em;
}
#main .efx-info h1 {
  line-height: 1;
  display: inline-block;
  padding: .1em .2em;
  font-size: 5em;
  margin: 0;
  background: #e3e3e3;
}
#main .efx-info p {
  margin: 0;
}
#main #efx-name {
  color: #16A085;
  font-weight: 900;
  border-bottom: 4px solid #f5f5f5;
}
#main #efx-ease {
  color: #34495E;
}
#main .menu-chks {
  position: relative;
  line-height: 1;
  font-size: .9em;
  width: 45%;
  float: right;
}
#main .menu-chks input {
  margin-right: .5em;
}
#main .menu-chks input:checked + span {
  color: #16A085;
}
#main .menu-chks input:checked + span:before {
  content: "\f046";
}
#main .menu-chks span {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#main .menu-chks span:before {
  font-family: 'FontAwesome';
  position: absolute;
  left: 12px;
  top: 10px;
  color: #3b536b;
  content: "\f096";
  font-size: 1.4em;
}
#main .menu-chks label {
  color: #e8e8e8;
  font-weight: 600;
  display: inline-block;
  position: relative;
  margin: .25em;
  background: #2d3f51;
  padding: .8em 1.2em .8em 2.5em;
  border-radius: .4em;
}
#main .menu-chks label:hover {
  cursor: pointer;
}

nav li {
  position: relative;
  display: inline-block;
  float: left;
}
nav a {
  position: relative;
  /*z-index: 599;*/
  color: #f5f5f5;
  background: #2d3f51;
  text-decoration: none;
  display: block;
  padding: 1.5em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
nav a i[class*="caret"] {
  color: #3b536b;
  margin-left: .15em;
}
nav a:hover {
  color: #16A085;
}
nav a:hover + .submenu {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  visibility: visible;
}
nav .eiob .submenu {
  -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
  -moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
}
nav .ln .submenu {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
nav .ei .submenu {
  -webkit-transition: all 0.3s ease-in, opacity 0.2s linear;
  -moz-transition: all 0.3s ease-in, opacity 0.2s linear;
  transition: all 0.3s ease-in, opacity 0.2s linear;
}
nav .eo .submenu {
  -webkit-transition: all 0.3s ease-out, opacity 0.2s linear;
  -moz-transition: all 0.3s ease-out, opacity 0.2s linear;
  transition: all 0.3s ease-out, opacity 0.2s linear;
}
nav .submenu {
  display: block;
  opacity: 0;
  position: absolute;
  visibility: hidden;
 /* z-index: 499;*/
  width: 14em;
  top: 100%;
  left: 0;
  background: #2d3f51;
  box-shadow: 0 2px 5px rgba(68, 68, 68, 0.3);
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -ms-transform-origin: top center;
  -o-transform-origin: top center;
  transform-origin: top center;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
nav .submenu li > .submenu {
  top: 0;
  left: 100%;
}
nav .submenu:hover {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  visibility: visible;
}
nav .submenu li {
  float: none;
  display: block;
}
nav .submenu a {
  width: 100%;
  display: block;
  font-weight: 300;
  padding: 1.4em 2em;
}
nav .submenu a:hover {
  color: #f5f5f5;
  background: #14957c;
}

nav.rx li:hover + .submenu {
  opacity: 1;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
nav.rx .submenu {
  -webkit-transform: rotateY(-90deg);
  -moz-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
  -o-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}
nav.rx .submenu:hover {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/*=== Fade Dwn ===*/
nav.fd li:hover + .submenu {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}
nav.fd .submenu {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
}
nav.fd .submenu:hover {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

nav.fu li:hover + .submenu {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}
nav.fu .submenu {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
}
nav.fu .submenu:hover {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

/*=== Scale ===*/
nav.sc li:hover + .submenu {
  opacity: 1;
  -webkit-transform: rotateY(0deg) scale(1);
  -moz-transform: rotateY(0deg) scale(1);
  -ms-transform: rotateY(0deg) scale(1);
  -o-transform: rotateY(0deg) scale(1);
  transform: rotateY(0deg) scale(1);
}
nav.sc .submenu {
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -ms-transform-origin: center top;
  -o-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
nav.sc .submenu:hover {
  -webkit-transform: rotateY(0deg) scale(1);
  -moz-transform: rotateY(0deg) scale(1);
  -ms-transform: rotateY(0deg) scale(1);
  -o-transform: rotateY(0deg) scale(1);
  transform: rotateY(0deg) scale(1);
}

/*==== Rotate ====*/
nav.rt li:hover + .submenu {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
nav.rt .submenu {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
nav.rt .submenu:hover {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/*==== Move/Skew In ====*/
nav.mv li:hover + .submenu {
  -webkit-transform: translateX(0px) skewX(0deg);
  -moz-transform: translateX(0px) skewX(0deg);
  -ms-transform: translateX(0px) skewX(0deg);
  -o-transform: translateX(0px) skewX(0deg);
  transform: translateX(0px) skewX(0deg);
}
nav.mv .submenu {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translateX(-40px) skewX(-7deg);
  -moz-transform: translateX(-40px) skewX(-7deg);
  -ms-transform: translateX(-40px) skewX(-7deg);
  -o-transform: translateX(-40px) skewX(-7deg);
  transform: translateX(-40px) skewX(-7deg);
}
nav.mv .submenu:hover {
  -webkit-transform: skewX(0deg);
  -moz-transform: skewX(0deg);
  -ms-transform: skewX(0deg);
  -o-transform: skewX(0deg);
  transform: skewX(0deg);
}

/*==== Door ====*/
nav.dc li:hover + .submenu {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
nav.dc .submenu {
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: rotateY(-90deg);
  -moz-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
  -o-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}
nav.dc .submenu:hover {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

的index.html 

<!DOCTYPE html>
<!--[if lte IE 9 ]><html class="ie lt-ie9" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en-US"> <!--<![endif]-->

<head>
    <meta charset='UTF-8'>
<script src="js/modernizr.js" type="text/javascript"></script>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet prefetch' href='css/normalize.css'>
<link rel='stylesheet' href='css/menu.css'>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<link rel='stylesheet' id='flatsome-css-minified-css'  href='css/flatsome.min.css' type='text/css' media='all' />
</head>
<body>

       <header >
<nav id="nav" class="ry" >
  <ul id="main-menu" > 
    <li>
      <a href="#"><i class="fa fa-home"></i> Home</a>
    </li>
    <li>
      <a href="#"><i class="fa fa-user"></i> About <i class="fa fa-caret-down"></i></a>
        <ul class="submenu">
        <li><a href="#0">Meet the Team</a></li>
        <li><a href="#0">Careers</a></li>
        <li>
          <a href="#0">More Items <i class="fa fa-caret-right"></i></a>
           <ul class="submenu">
            <li><a href="#0">A Sub-Item</a></li>
            <li>
              <a href="#0">A Sub-Item</a>
             </li>
            <li>
              <a href="#0">A Sub-Item</a>
             </li>
          </ul>  
         </li>
      </ul>  
    </li>
    <li>
      <a href="#"><i class="fa fa-shopping-cart"></i> Our Books <i class="fa fa-caret-down"></i></a>
       <ul class="submenu">
        <li><a href="#0">Lorem</a></li>
        <li><a href="#0">Aliquam</a></li>
        <li><a href="#0">Vestibulum</a></li>
        <li><a href="#0">Ipsum</a></li>
        <li><a href="#0">Consectetur</a></li>
      </ul>  
    </li>
    <li>
      <a href="#"><i class="fa fa-comment"></i> Contact Us</a>
    </li>
  </ul>
</nav>  
</header> 


     <div id="wrapper" class="box-shadow" >
        <div class="header-wrapper before-sticky">


</div><!-- .header-wrapper -->

<div id="main-content" class="site-main hfeed light">


<!-- woocommerce message -->


<div id="content" role="main">



<div class="ux-slider-wrapper relative" >
    <div class="ux-slider iosSlider hide-for-small slider-style-normal  slider-nav-dark slider-nav-inside slider-nav-circle js-flickity" 
        data-flickity-options='{ 
            "cellAlign": "center",
            "imagesLoaded": true,
            "lazyLoad": 1,
            "freeScroll": false,
            "wrapAround": true,
            "autoPlay": 6000,
            "prevNextButtons": true,
            "contain" : true,
            "percentPosition": true,
            "pageDots": true,
            "selectedAttraction" : 0.1,
            "friction": 0.6,
            "rightToLeft": false,
            "draggable": true        }'
        style=""
        >
           <div id="banner_1261757255" class="ux_banner dark    "  style="height:325px; " data-height="325px" role="banner">
      <a href="http://xxxxx.com/up-board-books/" >                            <div class="banner-bg "  style="background-image:url('http://www.natgen.org/wp-content/uploads/2015/07/bar2.png'); "><img src="images/uttar-pradesh-book-Banner.jpg"  alt="" style="visibility:hidden;" /></div>
                               <div class="banner-effect effect-sparkle"></div>
               <div class="row" >
          <div class="inner center text-center "  style="width:60%;">
            <div class="inner-wrap animated fadeIn" style=" ">
                          </div>
          </div>  
        </div>
       </a>              </div><!-- end .ux_banner -->

   <div id="banner_219276103" class="ux_banner dark    "  style="height:325px; " data-height="325px" role="banner">
      <a href="http://xxxxx.com/product-category/competition-books/magazines/" >                            <div class="banner-bg "  style="background-image:url('images/current-affairs.jpg'); "><img src="images/current-affairs.jpg"  alt="" style="visibility:hidden;" /></div>
                               <div class="banner-effect effect-sparkle"></div>
               <div class="row" >
          <div class="inner center text-center "  style="width:60%;">
            <div class="inner-wrap animated fadeIn" style=" ">
                          </div>
          </div>  
        </div>
       </a>              </div><!-- end .ux_banner -->





     </div>
    <div class="ux-loading dark"></div>
</div><!-- .ux-slider-wrapper -->









</div>


</div><!-- #main-content -->


</div><!-- #wrapper -->   

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/flatsome.min.js'></script>


</body></html>

2 个答案:

答案 0 :(得分：0)

你必须为子菜单尝试z-index。

答案 1 :(得分：0)

如果没有HTML，只有你的CSS很难做到，但看起来你的z-index还不够高。较高（正）的z指数将元素带到前面，负的z指数使元素进一步返回。请记住，z-index仅适用于定位元素。我看到你的子菜单是绝对的，这不应该是一个问题。幻灯片的z-index是多少？这是用JavaScript生成的，设置一个非常高的z-index？尝试将子菜单的z-index设置为一个非常高的数字（9999999左右），看看会发生什么。

编辑：我现在看到你的HTML了。只是尝试将您的z-index增加到一个非常高的数字，看看会发生什么。其他一切看起来都不错。

相关问题
最新问题