I have tried to replicate the issue in this [plunker](http://plnkr.co/edit/S5sjZkTm5oeRmGKCVE3q?p=preview). 

```
.demo-blog.mdl-layout .mdl-layout__content {
    padding-top: 0px;
    position: relative;
    margin-top: -80px;
    z-index: 100;
}

header.main-header{
  z-index: -50;
}

```

I want the div that says "on the road again" to be on top of the header that says "evolution update". I have tried changing the parent's z-index, changing each related unit's z-index, wrap header within a div tag, and yet nothing works. The "on the road again" div is still beneath the header. 

What is I want is [this](http://i.imgur.com/UirVMrl.png). 

Thanks a lot in advance.