Div与背景颜色重叠与链接的div

我有两个div使用z-index一点点的问题。我创建了一个名为topbar的div，其中z-index: 1和另一个名为“socialbuttons”的图标是z-index: 2，它与Facebook和Twitter有图像链接。但是，顶栏与soc按钮重叠，我既看不到也不点击社交按钮。我已经搜索了互联网，并尽我所能，但我仍然坚持同样的问题。任何帮助将不胜感激。这是我的HTML代码Div与背景颜色重叠与链接的div

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

JSFIDDLE

来源

2014-03-14 user3418385

您是否正在使用任何外部CSS文件？因为你的代码适合我。检查此http://jsfiddle.net/chankeypathak/29sk4/1/ –

我已经删除了css文件，但仍然没有运气。它在VS 2010的设计模式下工作得很好，但不适用于我的任何浏览器。我真的很难过！ – user3418385

您是否正在将社交媒体图标置于顶部栏部分？如果是这样，为什么你可以把代码放在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>

Fiddle

来源

2014-03-14 05:27:32

只是删除从socialbuttons

Here is the working link

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

来源

2014-03-14 04:56:48

那么我可以看到它在设计模式下正常工作，但它在运行时不起作用https://imagizer.imageshack.us/v2/1028x56q90/545/cnpz.jpg运行时截图https：/ /imagizer.imageshack.us/v2/1306x110q90/401/f3xx.jpg – user3418385

然后你的其他结构造型会产生问题，如果它在设计模式下工作的很好 –

Div与背景颜色重叠与链接的div

回答

相关问题