CODEWITHSUNDEEP
jquerycsshtmlhyperlink
Bonjour
Bonjour

Reputation: 137

Div above a clickable link

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; }

Upvotes: 1

Views: 1133

Answers (10)

Deryck
Deryck

Reputation: 7668

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.

Upvotes: 0

effe
effe

Reputation: 1365

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')
    })


})

Upvotes: 0

noob
noob

Reputation: 641

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/

Upvotes: 0

Reza Mamun
Reza Mamun

Reputation: 6189

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.

Upvotes: 0

webbist
webbist

Reputation: 456

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;}

Upvotes: -1

Khaled Hamdy
Khaled Hamdy

Reputation: 386

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;}

Upvotes: -1

user1533868
user1533868

Reputation:

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;
}

Upvotes: 1

Roy Sonasish
Roy Sonasish

Reputation: 4609

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

Upvotes: 1

putvande
putvande

Reputation: 15213

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;
}

Upvotes: 0

wrxsti
wrxsti

Reputation: 3504

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

Upvotes: 6

Related Questions