Css 带背景色的Div与带链接的Div重叠

我在使用

z-index

的两个div时遇到了一点问题。我创建了一个名为topbar的

div

，它带有

z-index:1

，还有一个名为“socialbuttons”的

z-index:2

，它有到Facebook和Twitter的图像链接。但是，顶栏与soc按钮重叠，我既看不到也看不到社交按钮。我浏览了互联网，尽我所能尝试了一切，但我仍然被同样的问题困扰着。任何帮助都将不胜感激。这是我的HTML代码

<div id ="topbar" 
    style="height: 56px; width:95%; background-color:#002268; z-index:-1; position:relative; top: -6px; left: -1px;">
</div>

<div id= "socialbuttons" 
    style= "position:relative; z-index: 1000; top: 15px; left: 770px; height:53px; width: 249px; margin-bottom: 0px;">

    <a href="https://twitter.com" target="_blank">

    <img alt="" src="images/twitter.png" 


        style="position:absolute; top: 0px; left:40%; height:49px; width: 59px; z-index:1000"/></a><a href="https://www.facebook.com" target="_blank"><img alt="" src="images/fbook.png" 

style="position:relative; width:50px; height:49px; top: 0px; z-index:1000"/></a></div>

---

只需从社交按钮中删除相对位置

---

我想这就是你要找的

<div id ="topbar" style="height: 56px; width:95%; background-color:#002268; z-index:-1; position:relative; top: -6px; left: -1px;">
    <a href="https://twitter.com" target="_blank">
        <img alt="" src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/48/social_twitter_box_white.png" style="float:right; height:49px; width: 59px;"/>
    </a>
    <a href="https://www.facebook.com" target="_blank">
        <img alt="" src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/48/social_facebook_box_white.png" style="width:50px; height:49px;float:right;"/>
    </a>
</div>

---

您是否使用任何外部CSS文件？因为你的代码对我来说很好。检查这个，我已经删除了css文件，但仍然没有运气。它在VS2010的设计模式下运行良好，但在我的任何浏览器中都不起作用。我真的被难住了！您是否希望将社交媒体图标放置在顶部栏部分？如果是这样的话，为什么你可以把代码放在div顶栏里呢？我实际上也试过了。还是不走运。“target=“\u blank”>“target=“\u blank”>我实际上发现问题的根源是firefox。广告拦截器正在拦截社交媒体图像。一旦我禁用了它，所有的代码都可以正常工作。谢谢大家的帮助：）我可以看到它在设计模式下正常工作，但在运行时屏幕截图中不工作，那么其他结构样式正在产生问题，如果它在设计模式下工作正常的话

<div id ="topbar" style="height: 56px; width:95%; background-color:#002268; z-index:-1; position:relative; top: -6px; left: -1px;">
    <a href="https://twitter.com" target="_blank">
        <img alt="" src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/48/social_twitter_box_white.png" style="float:right; height:49px; width: 59px;"/>
    </a>
    <a href="https://www.facebook.com" target="_blank">
        <img alt="" src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/48/social_facebook_box_white.png" style="width:50px; height:49px;float:right;"/>
    </a>
</div>