css z-index bug in blogger -

i'm creating new blogger template , unfortunately i'm facing issue. simple example trying do.

<div class='container'>   <div class='slider'></div>   <div class='posts'></div> </div> 

by default second div (posts) should have z-index higher first one. see demo , see this pic , see should done here , problem !. here blog

to have apparent higher z-index, element must either

1. after other element or
2. have position:relative; or absolute when previous element has relative/absolute position.

.d1{      width: 100%;      height:50px;      background: tomato;      position: relative;  }    .d2{      width:80%;      height:200px;      background: blue;      margin: -30px auto 0 auto;      position: relative; /* try removing - 'below' d1 because d1 has position:relative; */  }

<div class='container'>    <div class='d1 slider'></div>    <div class='d2 posts'></div>  </div>

in case, means adding position:relative; .container class.