facebook встроенный рендеринг поверх моего статического меню

Question

У меня есть веб-сайт со статическим меню, которое находится в верхней части экрана. Я достиг этого с помощью следующего кода CSS:

#menu 
{ 
    position: fixed; 
    top: 0; 
    left: 0f; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

У меня есть div с id 'menu', который отображается правильно. Все другие материалы на веб-странице отображаются ниже или под меню, как это предполагается. Затем я отправился на facebook и получил код, чтобы я мог включить фид facebook на странице. Facebook дал мне 2 набора кода, javascript и некоторые html. Я вставил их, и теперь, когда он отображается, лента новостей facebook отображается выше моего статического меню.

Вот код, который facebook дал мне:

<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

и

<div class="fb-page" data-href="https://www.facebook.com/magnoliahealthyliving/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/magnoliahealthyliving/"><a href="https://www.facebook.com/magnoliahealthyliving/">Magnolia Healthy Living</a></blockquote></div></div> 

мне нужно мое меню, чтобы сделать наверх в facebook встроенный HTML.

Answer 1

Добавить `z-index: 1 'или 999 to #menu.

#menu { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    z-index: 1; /*NEW*/ 
}