Div не перекрывает div ниже его

У меня есть два divs, где один из них - меню навигации, а другой div под ним, эти divs касаются друг друга. В главном меню есть подменю, в котором оно отображается, когда вы его наводите, это работает, и оно не перемещает ни одного div'а или ничего, кроме скрытия, но div в главном меню, как я его исправить? HtmlDiv не перекрывает div ниже его

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

EDIT: я воссоздали HTML и CSS в jsfiddle и она работает, как намерены, но в моем веб-сайте Безразлично» т? любая идея, что может вызвать это?

источник

2014-09-10 Steve

div.thathastopopup { 
    z-index:1; 
}

Documentation on z-index on MDN here.

Короче говоря, вы можете использовать z-index поместить элементы, которые расположены absolute, relative или fixed над Афоризм. Значение по умолчанию z-index равно 0, а порядок укладки определяется в пределах прямого родителя.

источник

2014-09-10 15:48:26

Это в css alredy, он ничего не сделал. – Steve

@Colosuslol поэтому воспроизведите проблему в скрипке. – Benjamin

@Colosuslol 'z-index' - это, безусловно, решение. Насколько я вижу, у вас есть это на неправильном элементе (слишком далеко вложенном). Если вы хотите, чтобы я более точно дал мне [SSCCE] (http://sscce.org/). –

Используйте свойство CSS для z-индекса. Вы можете думать об этом как о порядке измерения z. Поэтому, если вы складываете вещи друг над другом, z-index определяет, что находится над каким элементом. Чем выше число, тем выше элемент. Таким образом, г-индекс 10 будет ничего скрывать с г-индекса < 10.

источник

2014-09-10 15:50:21

z-index alredy там не сделал ничего – Steve

Не забывайте z-index работает только на элементах, которые position свойство не равно static (то есть. Элементы с position: absolute, position: relative или (если Я не ошибаюсь) position: fixed)).

источник

2014-09-10 15:53:09 neemzy

Div не перекрывает div ниже его

ответ

Смежные вопросы