div div的div背景中的div不在嵌套div上工作

Question

我在两个div之间有问题。 div#mainbody为父div {}有背景，div 2子div有自己的背景，所以div 2浮出父div但我希望它在父div内。

的 HTML： 的

<!-- parent div -->
<div id="mainbody">hi
   <div id="b1"></div> <div id="b2"></div> <!-- children divs -->

   <div id="main">
      <img src="images/fslam.png" id="fill" /><br/>
      <img src="images/register.png" id="register" /><br/>
      <img src="images/login.png" id="login" />
   </div>
</div>

的 CSS： 的

div[id=mainbody] {
   background-image: url(../images/img1300.png);
   box-shadow: 8px 8px 16px #000000;
}

div[id=main] {
   position: absolute;
   width:500px;
   height:375px;
   background-color:#FF6;
   z-index:1;
   background:-webkit-linear-gradient(top,#81cbbc,#fcf59b 2%);
   -webkit-background-size:100% 40px;
}

Answer 1

只需使用position: relative;代替absolute。

更新了fiddle

#main {
    position:relative;
    width:500px;
    height:375px;
    background-color:#FF6;
    z-index:1;
    background:-webkit-linear-gradient(top, #81cbbc, #fcf59b 2%);
    -webkit-background-size:100% 40px;
}