Отрицательные z-index выбивают ссылки - PullRequest
Новая
       20

Отрицательные z-index выбивают ссылки

3 голосов
/ 04 апреля 2011

Я пытаюсь добавить боковую панель на мою страницу.Контейнер основного тела на странице имеет прямоугольник-тень, поэтому я хочу, чтобы боковая панель выглядела так, как будто она выходит из-под контейнера, поэтому тень будет сверху его.Я сделал свою боковую панель div прямым потомком контейнера body (который имеет position: относительный), и установил его положение в абсолютное значение, а затем разместил его, используя верхнее и правое значения позиции.Я получил его в нужном месте, затем применил отрицательный z-индекс, чтобы он был под телом.Проблема в том, что все ссылки, которые я помещаю в боковую панель, становятся недоступными для всех, кроме IE9.Я не знаю, как еще я могу сделать это, не выбивая ссылки.Любые идеи?

Я бы опубликовал ссылку на страницу с примером, но я активно вносил в него изменения, так что к тому времени, когда вы нажмете на него, вы, вероятно, не увидите, для чего я иду,Я постараюсь объяснить лучше.

Контейнер body имеет ширину 720px и имеет автоматическое поле, чтобы он отображался по центру страницы.Он расположен относительно.

Боковая панель - это прямой дочерний элемент (первый дочерний элемент) контейнера body.Он имеет фиксированную ширину, абсолютную позицию, отступы и т. Д. И имеет примененную верхнюю и правую позиции вместе с z-index -100.

Вот ссылка:

http://reachchallenges.infectionist.com

Ответы [ 2 ]

0 голосов
/ 14 апреля 2015

Я не до конца понимаю, какой эффект желателен, но, возможно, эта скелетная скрипка может дать некоторые подсказки о том, как подходить к таким проблемам.

jsfiddle

Чтобы получить ссылки на работу, нужно переключить z-index обратно на положительное число.Ваш CSS будет выглядеть так: 

.z-index1{
    z-index: 1 !important;
}

, а ваш JS должен быть: 

$("#div-on-top").click(function(){
    $("#div-on-bottom").toggleClass("margin");
    $("#div-on-bottom").toggleClass("z-index1");
});

Нажатие на #div-on-top сместит его с пути, открывая #div-on-bottom, и это такжедовести #div-on-bottom до вершины, делая ссылки кликабельными.

Я также применил тень к #div-on-top, и она выглядела нормально (для меня; см. jsfiddle).

0 голосов
/ 04 апреля 2011

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

...