CSS工具提示问题 - 隐藏在Facebook之后的广告类似框和主体

Question

我使用纯CSS的工具提示，但有显示问题。跨度框隐藏在主boday和facebook右侧的框中。下面是相同的截图。

这里是提示CSS。

a.tooltip 
{ 
    position: relative; 
    display: inline-block; 
} 

a.tooltip span { 
    position: absolute; 
    width: 300px; 
    padding: 8px; 
    left: 50%; 
    font-size: 13px; 
    line-height: 16px; 
    margin-left: -160px; 
    text-align: justify; 
    visibility: hidden; 
    bottom: 40px; /** Use 30px for simple fade in effect - Removes slide down effect **/ 

    opacity: 0; 

    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 

    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

/** CSS Down Arrow **/  
a.tooltip span:after { 
    content: ''; 
    position: absolute; 
    bottom: -14px; 
    left: 50%; 
    margin-left: -9px; 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
} 

a:hover.tooltip span { 
    opacity: 1; 
    visibility: visible; 
    bottom: 30px; 
    z-index: 100; 
} 

a.imgleft { 
    float: left; 
    margin: 0 15px 10px 0; 
} 

a.imgright { 
    float: right; 
    margin: 0 0 10px 15px; 
} 

a.imgleft span, a.imgright span { 
    bottom: 140px; 
} 

a:hover.imgleft span, a:hover.imgright span { 
    bottom: 130px; 
} 


/** Span Color **/ 
a.ttblue { 
    color: #E45742; 
} 

a.ttblue span { 
    background: #E45742; 
    border: 4px solid #E45742; 
    color: #FFF; 
} 

a.ttblue span:after { 
    border-top: 10px solid #E45742; 
} 

任何帮助将不胜感激！谢谢

Answer 1

我相信我们必须看到更多的网页html能够帮助你。

但是，我能想象的唯一问题是.tooltip与右侧边栏位于不同的堆栈上下文中。

是否有任何.tooltip's父母/祖父母有z-index或opacity级别设置就可以了？这可能是一个不透明的水平。如果是，请在其上设置一个正z-index（或者如果侧栏也有z-index，比sidebar高一个）。