鏈接（在所有divs之上的href）

Question

嗨，這是我在網站的右側有一個滑動菜單，它的位置是固定的。並有一個鏈接「」，我想漂浮在它的位置絕對或相對與z-索引這樣的位置，但即使我添加Z指數10000.絕對位置或固定其不顯示。在滑塊div外面。

請檢查圖片。 check the green circle

注：一旦菜單打開時#menu接近被唾罵

的CSS，因爲這是和有困難時期的HTML老實說IM它謝謝

<a href="#menu" class="close" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></a> 



#menu .close { 
      background-image: url("images/close.svg"); 
      background-position: 4.85em 1em; 
      background-repeat: no-repeat; 
      border: 0; 
      cursor: pointer; 
      display: block; 
      height: 3em; 
      position: fixed; 
      right: 541px; 
      top: 0; 
      z-index: 50000; 
      display: block; 
      vertical-align: middle; 
      width: 7em; 
     } 

的Html

<div id="header" class="alt"> 
       <nav id="nav"> 
        <ul> 
         <li class="special"> 


          <a href="#menu" class="menuToggle"><span> menu</span></a> 

          <div id="menu"> 
           <div class="logo_menu"> 
           <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png"> 
          </div> 
            <ul> 
            <li><a href="<?php bloginfo('url'); ?>">Home</a></li> 
            <li><a href="<?php bloginfo('url'); ?>/company-values">Company Values</a></li> 
            <li><a href="<?php bloginfo('url'); ?>/our-services">Our services</a></li> 
            <li><a href="<?php bloginfo('url'); ?>/need-home-health-care-now">Need Home health care now?</a></li> 
            <li><a href="<?php bloginfo('url'); ?>/meet-the-team">Meet the Team</a></li> 
           </ul> 
          </div> 
         </li> 
        </ul> 

       </nav> 

      </div> 

的CSS

 */ 
    #header { 
     -moz-transition: background-color 0.2s ease; 
     -webkit-transition: background-color 0.2s ease; 
     -ms-transition: background-color 0.2s ease; 
     transition: background-color 0.2s ease; 
     background: #2e3842; 
     height: 3em; 
     left: 112px; 
     line-height: 3em; 
     position: absolute; 
     top: -38px; 
     width: 100%; 
     z-index: 10000; 
    } 

     #header h1 { 
      -moz-transition: opacity 0.2s ease; 
      -webkit-transition: opacity 0.2s ease; 
      -ms-transition: opacity 0.2s ease; 
      transition: opacity 0.2s ease; 
      height: inherit; 
      left: 1.25em; 
      line-height: inherit; 
      position: absolute; 
      top: 0; 
     } 

      #header h1 a { 
       border: 0; 
       display: block; 
       height: inherit; 
       line-height: inherit; 
      } 

       @media screen and (max-width: 736px) { 

        #header h1 a { 
         font-size: 0.8em; 
        } 

       } 

     #header nav { 
      height: inherit; 
    line-height: inherit; 
    position: absolute; 
    right: -5px; 
    top: 38px; 

     } 

      #header nav > ul { 
       list-style: none; 
       margin: 0; 
       padding: 0; 
       white-space: nowrap; 
      } 

       #header nav > ul > li { 
        display: inline-block; 
        padding: 0; 
       } 

        #header nav > ul > li > a { 
         border: 0; 
         color: #000; 
         display: block; 
         font-size: 0.8em; 
         padding: 0 1.5em; 
         text-transform: uppercase; 
          padding-left: 0px !important; 
        } 

         #header nav > ul > li > a.menuToggle { 
          outline: 0; 
          position: relative; 
         } 

          #header nav > ul > li > a.menuToggle:before { 
           background-image: url("images/bars.svg"); 
           background-position: right center; 
           background-repeat: no-repeat; 
           content: ''; 
           display: inline-block; 
           height: 3.75em; 
           vertical-align: top; 
           width: 2em; 
          } 

          @media screen and (max-width: 736px) { 

           #header nav > ul > li > a.menuToggle { 
            padding: 0 1.5em; 
           } 

            #header nav > ul > li > a.menuToggle span { 
             display: none; 
            } 

          } 

         @media screen and (max-width: 736px) { 

          #header nav > ul > li > a { 
           padding: 0 0 0 1.5em; 
          } 

         } 

        #header nav > ul > li:first-child { 
         margin-left: 0; 
        } 

     #header.alt { 
      background: transparent; 
     } 

      #header.alt h1 { 
       -moz-pointer-events: none; 
       -webkit-pointer-events: none; 
       -ms-pointer-events: none; 
       pointer-events: none; 
       opacity: 0; 
      } 


.logo_menu { 
    margin-bottom: 30px; 
} 

a.menuToggle { 
    text-decoration: none; 
} 

a.menuToggle span { 
    padding-left: 4px; 
} 

Answer 1

無論何時，如果要將元素絕對放在元素上，您需要將父元素設置爲position:relative，並將子元素放在父元素中。

<div class="parent"> 
    <a class="child">Child</a> 
</div> 

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

.child { 
    position: absolute; 
    z-index: 2; 
    top: 0; //style to taste 
    left: 0; //style to taste 
}