Link (ein href über allen divs)

Question

Hallo, das ist das Szenario, ich habe ein gleitendes Menü auf der rechten Seite der Website und die Position ist fest. und es gibt eine Verbindung "", die ich schweben über ihr Position absolut oder relativ mit dem Z-Index wie folgt, aber sogar ich z-Index 10000 hinzufügen. Position absolute oder feste es nicht angezeigt wird. außerhalb des Schiebers div.

Bitte überprüfen Sie das Bild. check the green circle

HINWEIS: , sobald das Menü geöffnet ist das #menu schließen

geschmäht wird die CSS für sie ist, und html ehrlich gesagt im eine harte Zeit, denn es Ihnen danken

<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

Immer wenn Sie ein Element absolut über einem Element platzieren möchten, müssen Sie das übergeordnete Element auf position:relative setzen und das untergeordnete Element in das übergeordnete Element einfügen.

<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 
}