列中Bootstrap3工具提示的Z索引是浏览器特有的。

Question

使用引导程序3，我有两个列(sm-3和sm-9)。左列为position: fixed，包含带有工具提示的链接。工具提示的z-index (未指定)似乎是特定于浏览器的。

(一般来说)定义工具提示的z-index的最佳方法是什么？我正在寻找一个干净的解决方案，可以在所有常见的浏览器中使用。

小提琴

Internet 11 (左) Chrome 48 / Edge 25 (右)

​

​

HTML:

<div class="container">
  <div class="col-sm-3" id="left">
    <a id="tooltipButton" href="#" data-toggle="tooltip" title='Long Text'>Show Tooltip</a>
  </div>
  <div class="col-sm-9 col-sm-offset-3" id="right">
    Content
  </div>
</div>

CSS:

#left { position: fixed;  }
#right { background-color: #ddd;  }

JS:

$('#tooltipButton').tooltip({
  trigger: 'click',
  html: true,
  placement: 'right',
});

我尝试过的几件事：

.tooltip { z-index: 10; } // Doesn't work
.tooltip .tooltip.in { z-index: 10; } // Doesn't work
.tooltip .tooltip-inner { z-index: 10; } // Doesn't work

在不添加更多div和不更改左或右div属性的情况下，是否有干净的解决方案？例如，#left { z-index: 10; }似乎可以工作，但会改变左div的属性和重叠行为。

小提琴

Answer 1

如果您给一个元素一个position而不是静态元素，它会强制它出现在任何仍然是静态的元素之上。这是z-index的一个相当未知的行为。因此，如果父元素有一个position而不是static，那么它的所有子元素都会有自己的堆叠作用域。它几乎像层一样工作。

这篇文章有一篇精彩的文章：没有人告诉你关于z-索引的事

因此，在您的示例中，所有的toop技巧代码都出现在具有自己的堆叠作用域的容器中，因此在下一个容器下是强制的。如果将z-index:999;添加到#left容器中，您将看到它是固定的。这是因为这个容器(以及它的内容)现在被迫高于下一个容器。

JSFIDDLE

您可以做的另一件事是将position:relative从#right容器中移除，这样它就没有自己的堆叠作用域，然后再次工作。

JSFIDDLE v2

我不认为这对你的问题有多大帮助，因为我不认为你能破门而入。更常见的做法是，将工具提示代码注入页面底部，从而使其自然地堆积在其他所有内容之上。