html - 父 div 的 div 背景中的 div 不适用于嵌套 div

Question

我在两个divs 之间有问题。div#mainbody这是父母div有一个背景，div2个孩子div有自己的背景，所以div2个浮出父母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.

更新的小提琴

#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;
}