how to access link, which is inside div and if div is overlay of another div

Question

I'm trying to design a layout, on which I want to put one div into another. But, the problem is link of the back div is not working.

<div id="container" style="z-index:-10;position:relative;height:100px">
    <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>
</div>
<div id="container1" style="margin-top:10px">
    <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>
</div>

which means, if I'm trying to access link of div id container, then I can't. How to solve this problem.

Note : I can't remove z-index, because I want container1 above of container

can you try and upload a proper working fiddle with styles? With the current markup you can't achieve, probably need a different approach — painotpi, Jun 18 '13 at 06:57

score 0 · Answer 1 · answered Jun 18 '13 at 06:58

Parse has got it right.

Without knowing what context you are using it in, just remove z-index:-10 or change it to a positive value like z-index:1;.

<div id="container" style="position:relative;height:100px;">
   <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>
</div>
<div id="container1" style="margin-top:10px;">
   <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>
</div>

Edit:

I just realised that you said that you wanted to put one div into another. That would be done like this:

<div id="container" style="z-index:1;position:relative;height:100px;background-color:#eee;">
    <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>

    <div id="container1" style="margin-top:10px;background-color:#ddd;">
        <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>
    </div>
</div>

I put some background-color on the divs to make it clearer.

you can simply understand like.. i need floating menu. But, the current problem is, menu is currently showing back of `container`. But, I want opposite of it. But, in this case link of `container` is not working — Ravi, Jun 18 '13 at 07:15

Qiqi Abaziz · Answer 2 · 2013-06-18T07:27:57.937

The answer is, you can't. Because the parent container already been set to z-index:-10, so the child can't have the z-index value higher than that. Maybe you can try change a bit the markup like this one, since you have applied position:relative at the container div there

<a href="#" style="position:absolute;left:0;">StackOverflow1</a>
<div id="container" style="z-index:-10;position:relative;height:100px"></div>
<div id="container1" style="margin-top:10px">
    <a href="#">StackOverflow1</a>
</div>

Add position:absolute, so the link act like it is inside the parent container with the lower z-index and of course it is accessible. You can see your updated jsfiddle here http://jsfiddle.net/gyheE/2/

how to access link, which is inside div and if div is overlay of another div

2 Answers2