z-index 上的内容 class

Question

我试图让我的内容覆盖 z-index 内容，我尝试给它一个更大的数字但没有用，有人可以帮我编码看看我是否做错了什么？非常感谢

每个数字在鼠标悬停时都会弹出一个内容列表，但是数字总是在悬停内容的前面，比如当鼠标悬停在“8”上时，弹出的内容在数字“9”的后面"，我正在尝试让悬停内容出现在最前面，有什么想法吗？

span.dropt {
  position: absolute;
  background: #006534;
  border: 2px solid #006534;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  line-height: 10px;
  padding: 2px 2px;
  text-align: center;
  color: white;
  cursor: pointer;
  z-index: 1;
}
span.dropt:hover {
  text-decoration: none;
  background: #ffffff;
  color: black;
}
span.dropt:hover span {
  left: 2%;
  background: #ffffff;
  \ margin: 20px 0 0 70px;
  background: #ffffff;
  z-index: 2;
}
span.dropt span {
  position: absolute;
  left: -999px;
  margin: -15px 0 0 20px;
  width: 110px;
  height: 105px;
  padding: 3px 3px 3px 3px;
  border-style: solid;
  border-color: #006534;
  border-width: 1px;
  text-align: left;
  line-height: 17px;
  z-index: 2;
}

 <span class="dropt" style="top:280px; left:490px;">8
    <span>content</span></span>

<span class="dropt" style="top:290px; left:520px;">9
    <span>content</span></span>

Answer 1

从您的 .dropt class 中删除 z-index: 1;。

当您设置 z-index: 1; 时，您的 .dropt 元素的基本堆叠上下文为 1。

所以你的内心 span 在 1 个上下文中的 z-index 为 2。想象一下你有不同的层次。

由于您的第二个 .dropt 元素位于标记下方，因此它将位于另一个元素之上。

Answer 2

我尝试使用您的代码，看起来可能是因为您在样式中使用 background 而不是 background-color。此外，您在 background: #ffffff; 之后有一个 \ 也可能使情况变得更糟。通常，background 字段需要多个组件，请参阅 http://www.w3schools.com/css/css_background.asp。

我将 background 更改为 background-color 后，一切正常。请注意，您可能还需要将 left: 2%; 更改为其他一些值

z-index 上的内容 class

Content over z-index class

html

css

z-index