Question

因此，我正在努力研究z-index和位置相对/绝对在我正在研究的网站上。

在此链接上悬停加号按钮（右侧）时可以看到此问题http://bitgamers.co.uk/thebox_test/media/movie/132/fury

如果向下滚动以使弹出窗口显示在底部，则显示没有问题，但如果它显示在顶部，则它隐藏在横幅下（这是背景图像）。

我做了一些研究，并认为我认为这是因为这两个元素位于不同的堆叠上下文中（标题中的横幅和海报以及下方容器中的提示），我该怎么办？使提示出现在顶部？

我试过给它所有类型的z-index，它确实没有什么区别。我在qtip关闭之前延迟了5秒，所以你可以查看代码。

谢谢！

  .media_head_holder {position:relative;z-index:100} <-- banner
  .media_avatar_holder {position:absolute} <-- poster inside banner
   //below
  .popover {position:absolute} <--triggered from navbar

Answer 1

我不确定...但我认为这是因为横幅的z-index比popover更高...... 我知道，你会说popover有z-index = 9999而且横幅有z-index = 100 ..但是这里我们有一个陷阱...... 您正在使用的Tha导航（.subnavbarz）（popover的父母）有z-index 50，因此他的所有孩子都将拥有z-index = 50（小于100的横幅）... 当你说popover有z-index = 9999时，你说它将z-index相对于所有的nav.subnavbarz子节点..但不超过他父母的z-index 50 ..

我不知道我是否很聪明（我的英语太可怕了）

使元素显示在不同堆叠上下文中的另一个元素上

1 个答案: