Div для слайд под другим

Question

Я пытаюсь получить абсолютно позиционированный элемент div (#slideout), чтобы сползать под другим элементом div .menu через CSS, если можно.

Вот мой: code

Как вы можете увидеть при нажатии на вкладку красный; #slideout охватывает .menu, что не то, что мне нужно. Я бы хотел, чтобы он подстал .menu, оставив только красную вкладку, чтобы пользователь мог снова щелкнуть, чтобы открыть элемент.

Вещи, которые я пробовал: Даю .menu высокий индекс z. Я даю #slideout нижний индекс z или даже без z-индекса.

Это не работает.

Было бы здорово, если бы все это было отзывчивым. Можете ли вы предложить мне некоторые трюки CSS или даже jQuery?

Answer 1

Z-индекс наследует его положение по порядку элемента по умолчанию и пути размещения (например, элемент с абсолютным позиционированием, скорее всего, перекрывает элемент без anypositioning, но, как и большинство вещей это может быть difrrent из браузер для браузера), чтобы переопределить его, вы должны установить позиционирование {относительный, абсолютный, фиксированный}, а затем добавить нужный z-индекс.

---

В вашем случае вы должны добавить position:relative; в .menu для того, чтобы работать, в противном случае, как я уже говорил ранее, он будет идти после наследования порядка элементов или с помощью которых позиционируют они имеют. CSS:

.menu { 
    background: none repeat scroll 0 0 #E0E0E0; 
    height: 100px; 
    width: 100%; 
    position:relative; 
    z-index: 99999 !important; 
} 

Это позволит устранить все