zapppa — 2011-03-31T06:05:47-04:00 — #1
I am trying to get a drop down menu to go over the banner I have for a site I am building: Home page
I am stumped as to why the drop down goes under the banner.
Is it something to do with z-index?
Any help would be greatly appreciated.
zapppa — 2011-03-31T07:38:19-04:00 — #2
thanks very much
paulob — 2011-03-31T06:25:12-04:00 — #3
Set position:relative on the nav and give it a higher z-index than anything that follows.
zapppa — 2011-03-31T06:28:34-04:00 — #4
You really are a saint! Thanks so much
I owe you many times
I had played with the z-index but wasn't sure why it wasnt working.
Why does the position relative line fix this problem?
paulob — 2011-03-31T06:55:45-04:00 — #5
z-index only applies to positioned elements. Therefore if the element is static then you need to add position:relative (without co-ordinates) and then you can apply a z-index as required.
This has no visual effect on the element other than providing a stacking context for positioned children and to also allow a z-index to take effect.
(Note that in IE7 and under its ultimately the positioned parent that controls the stacking level (contrary to the specs as positioned elements should be applied z-index auto by default but IE7 and under applies zero) so its no use increasing the z-index of a child of a positioned parent because it will have no effect outside its current context. It's the parent z-index that will control the stacking level with regards to elements outside the current context. )