html - 父 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;
}