Question

我的网站上有一个静态菜单，位于屏幕顶部。我用以下CSS代码实现了这个目标：

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

我有一个带有id＆＃39;菜单的div。显示正确。网页中的所有其他素材都会像菜单一样呈现在菜单下方或下方。然后我去了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的ontop。

Answer 1

添加 `z-index：1＆＃39;或999到#menu。

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

facebook嵌入式渲染在我的静态菜单上

1 个答案: