ansaurus

Question

css problem with divs

Answer 1

A:

Z-index works withing rendering context, so in your case it needs to be applied to #content, not second child. Also, it should already overlap the way you need if the red div is after the orange div in the page flow.

Too bad you don't give the full(er) source, with margins etc, so that I can try to reproduce this.

NPC 2010-07-30 08:36:33

Thanks for the accept, I expected you'd accept the answer from the other guy as it gives you a full solution...

NPC 2010-08-02 09:34:13

Answer 2

+1 A:

Can you try this?

<html>
<head>
<style type="text/css"> 
#content
{
   position: absolute;
   height: 300px;
   width: 200px;
   margin-left: 30px;
   background-color: blue;
}
#secondChild
{
   z-index: 9999;
   width: 100%;
}
#firstChild
{
   position: absolute;
   width: 50px;
   height: 50px;
   z-index: -1;
   margin-top: 120px;
   background-color: red;
}
</style>
</head>

<body>
  <div id="content">
     <div id="secondChild">Second Child</div>
  </div>
  <div id="firstChild">First Child</div>
</body>
</html>

Jprogyog 2010-07-30 08:38:02

ansaurus

tags:

views:

answers:

css problem with divs

related questions