html - 親 div の div バックグラウンド内の div がネストされた div で機能しない

Question

div2つのsの間に問題があります。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;
}