css z-index bug in blogger

Question

I'm creating a new blogger template , but unfortunately I'm facing an issue. simple example for what i am trying to do.

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

by default the second div (posts) should have z-index higher than the first one. see this demo and see this pic and now see what should be done here , so what is the problem !. here is my blog

Answer 1

To have an apparent higher z-index, the element must either be

1. After the other element or
2. Have a position:relative; or absolute when the previous element has a 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 this - it will be 'below' d1 because d1 has position:relative; */
}

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

In your case, this means adding position:relative; to .container class.