CODEWITHSUNDEEP
csshtmlhyperlinkanchorlayer
Klam Huggeren
Klam Huggeren

Reputation: 107

Links doesn't work in layered divs

I've been trying to figure out how to get my links working in layered divs

I have a big div containing two other divs:

The problem is that the main div is overlapping the navigation div wherein i want my links to be (ribbons) so that it looks like they are being pulled out when hovered. But they arent active links at all? my css is as follow:

    .navigate {
    width: 1020px;
    height: 300px;
    position: absolute;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    top: 190px;
    z-index: -1;
    border: 1px solid red;}

and

.main {
background: url("../images/papir.png") no-repeat center; /* papir.png bredde=1020px */ 
margin-left: auto;
margin-right: auto;
margin-top: 150px;
margin-bottom: 7em;
width: 1020px; /* 1020px */
height: 752px; /* 752px */ 
z-index: 0;
border: 1px solid green; }

it's like the navigation div is behind something :$

When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..

I've tried to fix it with

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

read somewhere that it should fix the problem - but not for me

Any ideas how to fix it?

Thanks in advance

Upvotes: 1

Views: 9740

Answers (4)

Klam Huggeren
Klam Huggeren

Reputation: 107

Got it working!

Just added:

position: relative;

to the .main-div

Upvotes: 1

Abdul Malik
Abdul Malik

Reputation: 2642

use negative margin for the div you want to over lay for example 

.overlay-div{margin-top:-20px;}

Upvotes: 0

Andy
Andy

Reputation: 36

Currently, you have the .navigate div z-index set to -1 so it is behind the .main div. Make it greater than the other divs so it's on top. E.g. z-index: 101;

Upvotes: 2

Scott Selby
Scott Selby

Reputation: 9580

When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..

If I understand this correctly , there is no way to get a link to work if there is another div overlapping on top of the link , ex. If The nav div is under the main div the links on Nav div will not work

but..

if you want the div with the links on top - poistion them relative or absolute or fixed , and set the z-index to any number higher then the div you want behind

Upvotes: 0

Related Questions