1

If I have this:

<div id='parent'>
<p>Parent stuff here</p>

  <div id='child'>Child stuff here</div>

</div>

Is there a way to make the parent div appear overtop of the child div without using position:absolute? Basically, you wouldn't see the child div at all. z-index doesn't seem to work. I want to do this with a transparent PNG so that I can highlight certain divs on mouseover - the transparentness will allow the under stuff to still be seen a little.

Thanks!

joshnh
  • 8,374
  • 4
  • 35
  • 53
Nick Lang
  • 859
  • 2
  • 9
  • 15
  • 2
    Why not do it the other way around? Put the child div on top of the parent, put it at 0 opacity by default, and then `onhover` increase its opacity. Has the exact same effect without making it more complicated on your part. – Purag Nov 23 '11 at 02:08
  • I agree with @Purmou, that is a much easier way. –  Nov 23 '11 at 02:20
  • "z-index doesn't seem to work" - as far as I know z-index works only when you have position property to the divs. but as long as you don't want the position:absolute I am not sure you'll get that div on top only with css. may be js, but I don't know – rmagnum2002 Nov 23 '11 at 02:26

1 Answers1

1

z-index will only work if a position other than static (the default) is set on that element. Add position: relative; to the relevant element and z-index will work. Here is an example: http://jsfiddle.net/sl1dr/8gR6V/

joshnh
  • 8,374
  • 4
  • 35
  • 53
  • 1
    Thanks! I figured this out just after... this isn't exactly what I wanted, but I'll ask another question. – Nick Lang Nov 23 '11 at 16:07