1

I have the following HTML and CSS where the position of the #header id has to be mandatory set to absolute:

<div class="main">
    <a href="www.website.com">
    <div id="header" class="other">
</div>


#header{
    padding-left: 250px; 
    position:absolute;
}

This code sets the header div over the link tag and it becomes (the link) unavailable for selecting.

My question is what CSS do I have to apply to .main > a so that it does not get below the header div?

I tried the below but it does not work so any other ideas are welcomed:

.main > a {
    z-index:99999;  
}
user3132858
  • 609
  • 1
  • 11
  • 27
  • try adding `position:relative` to `.main > a`..ie, your new CSS would be like `.main > a { z-index:99999; position:relative; }` – Lal Oct 27 '15 at 18:07
  • so simple...thanks mate! – user3132858 Oct 27 '15 at 18:10
  • Oh great...could you please mark my answer as accepted if that really helped you.. – Lal Oct 27 '15 at 18:11
  • yes, I will, it will allow me to do so in 10 min. In the mean time, do you know why this is only working for Mozilla but in IE 10, the `a` tag is still unavailable? – user3132858 Oct 27 '15 at 18:13
  • Thankyou..please see the answer [here](http://stackoverflow.com/a/12517272/3168859) for the bug in IE. – Lal Oct 27 '15 at 18:20

2 Answers2

2

z-index will work only on positioned elements

z-index wont be applied if no positioning has been specified for the element. So, I would suggest you to change your CSS slightly as below.

ie, the new CSS for .main > a would be like

.main > a {
    position:relative;
    z-index:99999;  
}

UPDATE

z-index will not work with statically positioned elements..see the answer here

Community
  • 1
  • 1
Lal
  • 14,726
  • 4
  • 45
  • 70
  • What about `position: static;`? It will make the element to have a position specified, but `z-index` won't apply. – taxicala Oct 27 '15 at 18:12
1

The z-index attribute won't have effect if you don't set position to relative, absolute or fixed.

.main > a {
    position: relative;
    z-index:99999;  
}
taxicala
  • 21,408
  • 7
  • 37
  • 66