2015-01-14 2 views
0

Как решить это с помощью css. enter image description hereКак переключить div с другим div

Когда я разворачиваю содержимое меню меню, разворачиваем его, как второе изображение. Это мой css

.contents { 
    /*margin-left: 165px;*/ 
    /*margin-top: 60px;*/ 
    position: absolute; 
    top: 120px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    overflow-y: scroll; 
} 

и это мой html с содержанием.

<div class="contents" id="subContents"> 

</div> 

Я пробовал с позиции «относительный», но это не работает для меня. С помощью z-index возникает такая проблема. enter image description here http://jsfiddle.net/ssaranga/o7sh1j0f/

+0

Работа с z-индексом, или позиция, зафиксированная в меню – WhiteLine

+0

Что касается вашего последнего прикрепленного изображения: Я думал, это то, что вы хотели. На данный момент неясно, чего вы хотите достичь. Я повторяю: сделайте демо (например, jsfiddle), чтобы уточнить ваши требования. –

ответ

2

Один из способов сделать это, чтобы добавить z-index свойство вашего класса переключения меню и назначить максимальное значение для него, в соответствии с тем, сколько укладываются элементы, которые вы имеете.

z-index указывает порядок стека элемента. Различные браузеры имеют разные значения max-min.

Преимущество использования числа, большего, чем фактические элементы, состоящие в том, что вам не нужно возвращаться и изменять значение z-index, если вы хотите добавить больше элементов.

Обратите внимание, что z-индекс работает только с расположенными элементами.

Например, вы могли бы сделать что-то вроде:

.toggle-menu{ 

position:relative 
z-index: 999; 

} 
+0

Это был просто пример, см. Обновление :) –

+1

Ничего плохого в использовании 9999 в качестве значения, зависит от контекста. Обратите внимание, что, используя 2, если вам нужны дополнительные слои между ними ... вам нужно снова изменить стек. A (хотя и очень) большое число обеспечивает leeway – SW4

+0

, но моя проблема не будет решена с использованием z-индекса. – Saranga

0

позиционирование не ваша проблема, это тот факт, что в меню DIV отображается в фоновом режиме.

У вас есть элементы html, расположенные друг над другом, и вам придется работать с CSS z-index propert, чтобы отрегулировать элемент по оси z.

+0

где я использовал z-index – Saranga

+0

@SarangaSachinthana. Ваша проблема в том, что вы не использовали свойство. Прочтите ссылку, и вы почувствуете, как она работает. –

+0

меню сверху. но верхнее содержимое в другом div не может получить доступ к – Saranga

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