css problem with divs_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-09 07:12 出处：网络

I have some div. I need in two children there. The first should be at static position and under second.

相关专题：css

I have some div. I need in two children there. The first should be at static position and under second.

alt text http://a.imageshack.us/img685/8185/imgpk.png

Orange rectangle should be positioned to the parent div and has static position (for example, top: 20px;). The 开发者_Go百科second child (red rectangle) should be over all another divs.

I tried to make orange div absolute and use z-index to manipulate draw-queue. But it's always at the top (or below all another, when z-index is negative)

Could you help me with this?

UPD

<div id="content">
      <div id="secondChild"></div>
</div>
<div id="firstChild"></div>

#content
{
    position: absolute;
    width: 100%;
}
#secondChild
{
    z-index: 9999;
}
#firstChild
{
    position: absolute;
    z-index: -1;
}

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>

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.