Div가 div 아래에 겹치지 않습니다

Question

두 개의 div가 있습니다. 하나는 탐색 메뉴이고 다른 div는 서로 닿는 위치입니다. 주 메뉴는 당신이 그것의 공중 선회 할 때, 이것이 작동하고 그것 주변에 어떤 divs도 움직이지 않으며 그러나 숨겨지고있다 그러나 주 메뉴의 밑에 div에있는 종이를 두는 sub 메뉴가있다 나는 그것을 고치는가? HTML을

<div id="mainmenu"> 
     <ul id="yw2"> 
      <li><a href="/Photoshop/index.php?r=home">Home</a></li> 
      <li><a href="/Photoshop/index.php?r=site/page&amp;view=about">About us</a></li> 
      <li><a href="#">Portofoloio</a> 
       <ul> 
        <li><a href="#">Photography</a></li> 
        <li><a href="#">Videography</a></li> 
       </ul> 
      </li> 
      <li><a href="/Photoshop/index.php?r=home/#">Wedding Services</a></li> 
      <li><a href="/Photoshop/index.php?r=home/#">Wedding Packages</a></li> 
      <li><a href="/Photoshop/index.php?r=home/#">Destination Weddings</a></li> 
      <li><a href="/Photoshop/index.php?r=home/#">Contact us</a></li> 
     </ul> </div><!-- mainmenu --> 
    <!-- breadcrumbs --> 

    <div class="span-19"> 
     <div id="content"> 




      <link rel="stylesheet" type="text/css" href="/Photoshop/css/rslides.css" /> 
      <script src="/Photoshop/scripts/responsiveslides.min.js"></script> 

      <script> 
       $(function() { 
        $(".rslides").responsiveSlides({ 
         speed: 1000, 
         timeout: 3000, 
         pager: true, 
         pause: true 
        }); 
       }); 
      </script> 
      <ul class="rslides"> 
       <li> 
        <img class="carousel-item" src="images/upload/index/12769252" alt="Scrolling Image" />   </li> 
       <li> 
        <img class="carousel-item" src="images/upload/index/1374403352" alt="Scrolling Image" />   </li> 
       <li> 
        <img class="carousel-item" src="images/upload/index/170297090" alt="Scrolling Image" />   </li> 
       <li> 
        <img class="carousel-item" src="images/upload/index/62949888" alt="Scrolling Image" />   </li> 
      </ul> 

CSS

/*mainmenu*/ 
#mainmenu 
{ 
    text-align: center; 
    border-top: 2px solid #addccf; 
    border-bottom: 2px solid #addccf; 
} 

#mainmenu ul 
{ 
    padding:8px 20px 8px 20px; 
    margin:0px; 
} 
/*the primary menu*/ 
#mainmenu ul li 
{ 
    position: relative; 
    display: inline; 
} 
/*The text of the menu*/ 
#mainmenu ul li a, 
#mainmenu ul li ul li a 
{ 
    color: #454545; 
    font-size:14px; 
    font-weight:bold; 
    text-decoration:none; 
    padding:5px 8px; 
} 
/*When you hover over*/ 
#mainmenu ul li a:hover, 
#mainmenu ul li.active a 
{ 
    color: #b6e37c; 
    text-decoration:none; 
} 
/*Submenu Css*/ 
#mainmenu ul li ul{ 
    display: none; 
    position: absolute; 
    text-align: center; 
    padding:8px 20px 8px 20px; 
    border: 2px solid #addccf; 
    left: -40px; 
    width: 150px; 
    margin-top: 15%; 
    top: 100%; 
    z-index: 1; 
} 
#mainmenu ul li ul li a{ 
    display: block; 
} 
/*Whe users hovers it will show the submenu*/ 
#mainmenu ul li:hover > ul{ 
    display: block; 
} 
/*end of mainmenu*/ 
.span-19{ 
    margin-top: 30px; 
    text-align: center; 
    width: 100%; 
} 

편집 : 나는 jsfiddle에서 HTML과 CSS를 재현하고 그것을 의도 한대로 작동하지만 내 웹 사이트에이 '아무튼 티? 무슨 생각으로 그걸 일으킬 수 있니?

Answer 1

div.thathastopopup { 
    z-index:1; 
} 

Documentation on z-index on MDN here.

즉, 을 사용하여 absolute, relative 또는 fixed에 배치 된 요소를 서로에 배치 할 수 있습니다. z-index의 기본값은 0이며 스태킹 순서는 직접 상위 내에서 정의됩니다.

Answer 2

z- 색인에 CSS 특성을 사용하십시오. 당신은 z 차원에 대한 질서와 같다고 생각할 수 있습니다. 따라서 물건을 서로 위에 겹쳐 놓으면 Z- 색인이 어느 요소 위에 있는지를 정의합니다. 숫자가 높을수록 요소가 더 높습니다. 그래서 10의 Z- 인덱스가 z-index 잊지 마세요 < (10)

Answer 3

의 Z- 인덱스와 아무것도 숨길 만 (있는 경우 position 속성이 position: absolute, position: relative이나와 static (예. 요소가 동일하지 않는 요소에서 작동 나는 틀렸어) position: fixed)).