Why z-index, why can’t you just appear above absolutely everything?!

[magicspon]

I need your help.

I’ve had this issue lurking around since I started the project. I keep pushing it to the bottom of the to do list, the designer wants it fixed.

So I’ve got an accordion, each accordion item has an anchor link to expand/collapse the item. The link is positioned absolutely and overflows by 10px into the next list item. When you hover over each accordion item a background colour is applied.

The problem is this, when you hover over each item the background colour appears on top of the previous items anchor link.

I’ve put all the html/css on jsfiddle.
http://jsfiddle.net/magicspon/GzB44/

If anyone can work this one out i’ll be super happy, as will the designer.

Ideally I don’t want to have to change the markup as everything has been integrated into the CMS so markup changes are a ball ache!

Anyway, any ideas

Cheers
Dave

[chrisburton]

@magicspon you forgot to include a link to the jsfiddle.

[magicspon]

yup! every time…

http://jsfiddle.net/magicspon/GzB44/

[chrisburton]

@magicspon Remove z-index: 1; from ul.entries li

http://jsfiddle.net/GzB44/3/

[magicspon]

no way! now i feel dumb!

that’s amazing, muchos gracias

[chrisburton]

It’s always those little things.

[magicspon]

is the default z-index value 0?

[chrisburton]

I think it’s `z-index: auto;`

[Kitty Giraudel]

Yeah, default value is 0 according to Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index

[neerukool]

@magicspon, you might not want to look that in IE 7-8.

[Author]

Posts