Div above a clickable link

Question

I want to make a div above an another div which contains a link. The problem is that the first div prevents to access on the link. It's possible to make it present but accessible ?

(I don't want to make a border around a div, or something like that, i really want to make div above an other div)

DEMO IN FIDDLE

HTML :

<div class="top">
<a href="#">LINK</a>
</div>
<div class="bottom"></div>

CSS :

.top { 
height:100px;
width:200px;
position:fixed;
top:10px;
background:yellow; }

.bottom { 
height:50px;
position:fixed;
top:10px;
width:100px;
border:3px solid red; }

Answer 1

I believe you are looking for pointer-events:none; in the CSS of .bottom

Try this:

.bottom { 
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
    pointer-events:none;
}

http://jsfiddle.net/wrxsti85/aYV4J/

Hope it helps!

Edit: Added a fiddle

Answer 2

you can do this by this way

.top a{
    position:relative;
    z-index:2;
}

and in .bottom div mention

.bottom { 
    z-index:1;
}

updated jsFiddle file

Answer 3

use z-index

demo

.top {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    background:yellow;
    z-index:99999;
}
.bottom {
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
}

Answer 4

Use z-index to place one over the other:

.top {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    z-index:1;
    background:yellow;
}
.bottom {
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
    z-index:0;
}

Answer 5

Just add with your current CSS:

.bottom{
    ....

    pointer-events:none;
}

Otherwise, you can add/increase a z-Index value for the .top class only if you don't have any z-Index limitation in your case.

Answer 6

I do not get why you guys are using position:fixed here. If you don't want any borders and want it to be simple then use :

.top { 
    height:100px;
    width:200px;
    background:yellow; 
    position:relative;
}

.bottom { 
    height:50px;
    position:absolute;
    top:10px;
    width:100px;
    border:3px solid red; 
    z-index:-1;
  }

Link to fiddle http://jsfiddle.net/wVLa8/24/

Answer 7

Please check this fiddle . Maybe holding the right ear with left hand but the only solution (without browser support problem) to create invisible mirror objects front of the object which makes behind objects inaccessible and let them transfer events to original objects...

$(function () {

    $.each($('.back').children(), function () {

        var $behindObject = $(this),
            $behindObjectOffset = $behindObject.position();

        $('<div class="invisible-mirrors">')
            .css({
                width: $behindObject.width(),
                height: $behindObject.height(),
                top: $behindObjectOffset.top,
                left: $behindObjectOffset.left
            })
            .on('click', function () {
                $behindObject.trigger("click");
            })
            .appendTo('.fore')
    });


    //test of click event

    $('.back a').on('click', function () {
        $(this).text($(this).text() + ' got the event : click')
    })


})

Answer 8

Holy crap none of this is necessary. Do not use Z-INDEX and do not use POINTER-EVENTS.

Please look at this Fiddle first

Just re-arrange your HTML and name your CSS selectors correctly:

HTML:

<div class="bottom">
    <div class="top"> <a href="#">LINK</a>
    </div>
</div>

Elements considered "UNDER" or "BEFORE" other elements appear first in HTML.

CSS:

.bottom {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    background:yellow;
}
.top {
    height:50px;
    position:absolute;
    width:100px;
    border:3px solid red;
}

You also don't need them both position: fixed; . Only the container. This also means they shouldn't be one, then the other. If you really need them like that, you can keep them both fixed as before and change the HTML but I would advise against that.

Answer 9

Try this, it puts the Divs on top of each other:

.top { 
    height:100px;
    width:200px;
    top:10px;
    background:yellow;
    display:block;}

.bottom { 
    height:50px;
    top:10px;
    width:100px;
    border:3px solid red;
    display:block;}

Answer 10

Not sure why youve done it the way you have.

Z-index can be used to put one div above another however there are better ways to do what you want.

See this Fiddle

HTML

<div class="bottom">
<a href="#">LINK</a>
</div>

css

 .bottom {height:auto;width:100px;border:3px solid red;background:yellow; }
 .bottom a {display:block;margin:0 auto;background:yellow;padding:20px;text-align:center;}