列中 Bootstrap3 工具提示的 z-index 是特定于浏览器的

Question

使用 bootstrap 3 我有两列（sm-3 和 sm-9）。左列是 position: fixed 并包含带有工具提示的 link。工具提示的 z-index（未指定）似乎是特定于浏览器的。

什么是（通常）定义工具提示 z-index 的最佳方法？我正在寻找适用于所有常见浏览器的干净解决方案。

Internet Explorer 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',
});

我尝试过的一些事情 (CSS):

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

FIDDLE

Answer 1

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

这篇文章有一个惊人的写法：What no-one told you about z-index

因此，在您的示例中，所有 tooptip 代码都出现在具有自己的堆叠范围的容器中，因此被强制放在下一个容器下。如果将 z-index:999; 添加到 #left 容器中，您将看到它已修复。这是因为该容器（及其内容）现在被迫高于下一个容器。

JSFIDDLE

您可以做的另一件事是从 #right 容器中删除 position:relative，这样它就没有自己的堆叠范围，然后它又可以工作了。

JSFIDDLE v2

我认为这对您的问题没有多大帮助，因为我认为您无法破解它。更常见的做法是将工具提示代码注入页面底部，以便它自然地堆叠在其他所有内容之上。

列中 Bootstrap3 工具提示的 z-index 是特定于浏览器的

z-index of Bootstrap3 Tooltip in columns is Browser specific

html

javascript

css

twitter-bootstrap

twitter-bootstrap-tooltip