Дочерний div за родительским div, как исправить ссылку? - PullRequest
Новая
       2

Дочерний div за родительским div, как исправить ссылку?

3 голосов
/ 24 июля 2010

Я пытаюсь поместить дочернего элемента <div> (со ссылкой в ​​нем) позади его родителя <div>, но ссылки не работают.

Я использую z-index: -1, поэтому, возможно, ссылка рисуется "за" <body>.

Есть ли способ добиться этого, не разрывая ссылку?

Спасибо

CSS 

    .front {
        width: 200px;
        height: 200px;
        background: #EA7600;
        -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
        -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
        box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    }

    .back {
        width: 300px; height: 50px; background: #93CDFB;
        position: absolute;
        left: 100px;
        text-align: right;
        padding: 5px;
    }

HTML 

<div class="front">

<div class="back">

<a href="http://www.stackoverflow.com">This link works</a>

</div>

</div>


&nbsp;


<div class="front" style="z-index: 1">

<div class="back" style="z-index: -1">

<a href="http://www.stackoverflow.com">This link doesn't work</a>

</div>

</div>

Результат

альтернативный текст http://img832.imageshack.us/img832/8137/screenshot20100723at105.png

Ответы [ 4 ]

3 голосов
/ 24 июля 2010

Я просто потратил полчаса на чтение (очень сложное) CSS-спецификации , но меня немного смущают позиционируемые элементы и контексты стека.Однако, поигравшись, я обнаружил, что 

body {
    position: relative;
    z-index: 0;
}

действительно работает!

body {
    position: absolute;
}

Это превратит элемент body в новый контекст хранения, а это означает, что тело (не html) будет служить canvas для .back div.

0 голосов
/ 24 июля 2010

Да, действительно. Если вы отметите jsfiddle , вы увидите его в действии.

Как вы и подозревали, это был -1 z-index, вызывающий у вас проблемы. Переместив контейнер с оранжевым цветом за пределы оранжевого и присвоив оранжевому контейнеру z-индекс, вы сможете поддерживать порядок наложения, и ссылка все еще работает.

0 голосов
/ 24 июля 2010

Как насчет предоставления дочерней ссылке большего z-индекса?

Так что для CSS 

.back a {
  z-index: 50
}

и оставить остальных как есть?

0 голосов
/ 24 июля 2010

может быть для передней: display: inline или float: left

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...