Question

我正在尝试将我的内容放在z-index内容上，我试过给它一个更大的数字但不能正常工作，有人可以帮助我编写代码，看看我做错了什么吗？非常感谢

鼠标悬停时，每个数字都会弹出一个内容列表，但是数字总是在悬停内容的前面，例如当鼠标悬停在＆＃34; 8＆＃34;之后，弹出的内容落后号码＆＃34; 9＆＃34;，我试图将徘徊的内容放到前面，任何想法？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

从z-index: 1;课程中删除.dropt。

当您设置.dropt时，您的z-index: 1;元素的基本堆叠上下文为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类

2 个答案: