All geek questions in one place

Child div for parent div, how to fix the link?

I am trying to put a child <div>(with a link in it) behind its parent <div>, but the links do not work.

I use z-index: -1, so maybe the link is drawn "behind <body>. "

Is there a way to achieve this without breaking the link?

thank

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>

Result

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

+3
source share
4 answers

I just spent half an hour reading the (very complex) CSS specification , but I got a little confused about positioned elements and stacking contexts. However, after messing around, I found that

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

! ,

body {
    position: absolute;
}

body , , ( html)

+3

: display: inline float: left

0

. jsfiddle, .

, -1 z-index, . z- , .

0

, z-?

, CSS

.back a {
  z-index: 50
}

& , ?

-1

Source: https://habr.com/ru/post/1756304/

More articles:


All Articles