Question

我使用z-index的两个div有点问题。我创建了一个div名为topbar with 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>

JSFIDDLE

Answer 1

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

Here is the working link

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

Answer 2

我认为这就是你要找的东西

<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

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

2 个答案: