My header is in fixed position and i have a Disqus issue.

My Situation: I have a non moving header which stays in place whenever i scroll down. I have a div at the bottom just before the footer. This DIV contains the Disqus Commenting System.

The problem is:

whenever i scroll down at the bottom, the DIV run smoothly as expected (right under the Header) BUT the Disqus Commenting System GOES ABOVE the header which is supposed to be UNDER the header.

The code of div and the call function of comments template is right down below:

<div class="comments-template" style="position:inherit;">
<?php comments_template(); ?>
</div>

The CSS Codes for DIV and Disqus Commenting System is below:

.comments-template{
    width: 1040px;
    position: static;
    margin: auto;
    clear:both;
    background-color:#CCC;

}

#disqus_thread {
    color: #FFF; 
    padding: 5px;
    margin: auto;
    clear:both;
    position:static;
}

.dsq-comment-header {
    background-color: 2d2d2d;
    font-family:"Arial",sans-serif;
    font-size: 12px;
    height: 50px;
    position:static;
    clear:both;
    }

.dsq-comment-message {
    font-family:"Tahoma",sans-serif;
    font-size: 11px;
    color: #333; 

    }
textarea {
    background-image: none;
    background-repeat: repeat;
    border:  #开发者_开发技巧666 2px solid; /* light blue border */

    }
.dsq-comment {
    border: #666 2px solid; /* light blue border */
    margin-bottom: 15px;

    }

I hope you can help me with my problem.

Thank you in advance!

---

Give your header a higher z-index:

header {
  z-index: 5;
}