Yes, like in the title, the Facebook Comment Plugin override my header div when scrolling.
This is before scrolling:
This is after scrolling:
Style of header bar:
#header {
height:45px;
position: fixed;
top: 0;
left: 0;
width: 100%;
opacity: 0.95;
background: #2D2D2D;
}
#colorbars {
border-top: 3px solid #DD5044;
height:42px;
border-bottom: 8px solid rgba(40, 40, 40, .2);
}
#headercontainer {
width: 940px;
overflow: hidden;
margin: 0 auto 0 auto;
}
HTML of header bar:
<div id="header"><header id="colorbars"><div id="headercontainer">
// content
</div></header></div>
And code of Facebook Plugin is:
<fb:comments href="<?php echo $facebook_href; ?>" width="655" num_posts="4"></fb:comments>
Does setting the z-index
of the header help?
#header {
/* ... */
z-index: 9999;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.