Серый на весь сайт

Question

Я пытаюсь очернить весь свой набор, когда кто-то перетаскивает файл для загрузки. Событие для перетаскивания и фактического активации серого работает правильно, но оно не работает повсеместно.

При наведении некоторых частей сайта серый цвет исчезает, особенно в # меню и области # dragndrop. Я понимаю, что это проблема с позиции, но мне пока не удалось найти хорошее решение. Я пробовал использовать z-index безрезультатно.

CSS:

#menu { 
    background-color: #000; 
    height: 23px; 
    padding-top: 7px; 
} 
#dragndrop { 
    background-image: url(../img/dragndrop.png); 
    background-repeat: no-repeat; 
    width: 733px; 
    height: 71px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -366.5px; 
    margin-top: -35.5px; 
} 

#filedrag { 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    padding: 0; 
} 

#filedrag.hover { 
    background-color: grey; 
    opacity: 0.5; 
} 

HTML:

<div id="filedrag"> 
     <div id="menu"> 
      <ul> 
        <li class="active"><a href="index.php" id="menu-upload">Upload</a></li> 
        <li><a href="search.php" id="menu-search">Search</a></li> 
      </ul> 
     </div> 
     <form id="upload" action="upload.php" method="POST" enctype="multipart/form-data"> 
        <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="30000000" />  
     </form> 
     <script src="filedrag.js"></script> 

     <div id="dragndrop"> 
       <div id="text-box"> 
       test 
       </div> 
     </div></div> 

Здесь я пытаюсь обернуть весь сайт в #filedrag, но он не работает. Есть идеи? Он охватывает сайт, но всякий раз, когда я наводил логотип или меню, он исчезает.

Answer 1

Попробуйте z-index «Все, что находится под областью, которая выделяется.

Answer 2

Не заверните весь сайт в #filedrag. Вместо того, чтобы иметь его в качестве абсолютного ДИВ просто сидело, как прямой потомок следующим образом:

... 
<div id="filedrag"></div> 
</body> 

Тогда просто это скрыть и показать свой Javascript.

Ключ состоит в том, чтобы, возможно, отделить зону сбрасывания и 100% оверлейный div.