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

Я пытаюсь поставить ребенка <div> (со ссылкой на него) за его родителем <div>, но ссылки не работают.Детский 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>

Результат

alt text http://img832.imageshack.us/img832/8137/screenshot20100723at105.png

источник

2010-07-24 Victor

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

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

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

body { 
    position: absolute; 
}

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

источник

2010-07-24 07:23:13 user123444555621

Спасибо! Отлично! – Victor

может быть на передней один: дисплей: встроенный или поплавок: левый

источник

2010-07-24 03:09:40 BobTurbo

спасибо, но не работает – Victor

Существует действительно. Если вы проверите это jsfiddle, вы увидите его в действии.

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

источник

2010-07-24 03:16:23 Pat

Спасибо Пэт, но я не могу изменить тот факт, что ящик для чирок является ребенком оранжевой коробки. Есть ли способ сделать это, не касаясь Html? – Victor

К сожалению нет - как вы обнаружили, укладка ребенка под его родителем в лучшем случае отрывочна. Честно говоря, я даже не пробовал отрицательный индекс z, поэтому я был удивлен результатом. – Pat

-1

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

Так что для CSS

.back a { 
    z-index: 50 
}

& оставить другим, как они в настоящее время?

источник

2010-07-24 05:28:08

спасибо, но не сработал – Victor

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

ответ

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