z-index 不适用于我的带有轮播的工具提示答案

【问题标题】：z-index does not work on my tooltip with carouselz-index 不适用于我的带有轮播的工具提示
【发布时间】：2013-07-09 05:38:36
【问题描述】：

在site 顶部的轮播中，我使用了两种工具提示。第一个是使用这种风格的轮播实现的：

  #carousel div:hover span,
        #carousel div.hover span {
            background-color: #333;
            color: #fff;
            display: inline-block;
            width: 500px;
            padding: 2px 0;
            margin: 0 0 0 -500px;
            position: absolute;
            bottom: 0;
            left: 50%;
            border-radius: 3px;
            z-index: 600 !important;
        }

这是灰色框，正如您在第一张图片中看到的那样，如果它越过包装器 div，它将切断它。即使我使用的是 z-index。

第二个是使用“tooltip4”类的：

.tooltip4:hover em {
z-index: 600;
text-align: center;
font-style: normal;
display: block;
position: absolute;
top: 50px;
left: 50px;
padding: 5px;
color: #fff;
/*border: 1px solid #bbb;*/
background-color:rgba(16,110,99,0.9);
box-shadow: 0 0 7px 2px #1B8478;
width:400px;    
}

这个用在第二张图上，你根本看不出来，应该有类似左边轮播的效果。

请问有解决这些问题的办法吗？

【问题讨论】：

标签： html css hover tooltip carousel

【解决方案1】：

#carousel div:hover span,#carousel div.hover span {margin: 0 0 0 -90px;}

从这个类中移除 z-index #carousel div

并编辑这个类

.tooltip4:hover em {top: -243px;left: -197px;}

【讨论】：

感谢您的回答，我现在确实可以看到第二个工具提示，但由于overflow: hidden，它仍然会在底部被截断。如果可能的话，我希望它出现在标题之外。
您可以使用 position:fixed 并根据您的需要偏离路线更改顶部和左侧的值
非常感谢，它有效。但它仍然被firefox切断。

【解决方案2】：

我认为问题实际上是您将span 放在具有特定宽度和高度的div.caroufredsel_wrapper 中，因此它在div 之外被切断。如果您将跨度放在更高的级别（例如在body 或header 或div#wrapper 下），它应该可以工作。

【讨论】：

感谢您的回答，div.caroufredsel_wrapper 的宽度似乎与 wrapper 的宽度相同。我看不到工具提示的原因似乎是因为溢出，但是如果我使用 CSS 使其可见，则事件：我将能够看到工具提示，但滑动时图像也会溢出。我不知道如何将span 放在更高的级别，因为它适用于每个图像（除非您在谈论 z-index 级别）。