Мой заголовок находится в фиксированной позиции, и у меня есть проблема Disqus.

Question

Моя ситуация: У меня есть неподвижный заголовок, который остается на месте всякий раз, когда я прокручиваю вниз. У меня есть div внизу, прямо перед нижним колонтитулом. Этот DIV содержит систему комментирования Disqus.

Проблема:

всякий раз, когда я прокручиваю вниз внизу, DIV работает плавно, как и ожидалось (прямо под заголовком) НО Система комментариев Disqus ВЫШЕ НАД заголовком, который должен быть ПОД заголовком.

Код div и функция вызова шаблона комментариев находятся ниже:

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

Коды CSS для системы комментирования DIV и Disqus приведены ниже:

.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;

    }

Надеюсь, вы поможете мне с моей проблемой.

Заранее спасибо!

Answer 1

Дайте свой заголовок выше z-index:

header {
  z-index: 5;
}