0

我试图在这里实现与这个人相同的效果：css position of an info-note on the top of an icon

但就我而言，我在其他图像之上有信息图标，请参阅这个 jsBin：http: //jsbin.com/usuyu3/5

我想将信息图标放置在表格标题的左下角，因此相对位于相同的位置。

当我在 .tooltip 类上使用 position:relative 时，会显示信息图标，但我无法将它们放在表格顶部。

使用 position:absolute 时，我可以在表格顶部获得 1 个图标，但其他图标变得不可见。

我将如何解决这个问题？

4

2 回答 2

0

答案是在 css 中使用“z-index”。

元素的 z-index 值较高意味着该元素将出现在具有较低 z-index 的其他元素之上。在 css 中，确保要显示的元素的 z-index 大于其他元素。如果你还没有放 z-index，你现在可以放它们。

注意：z-index 取决于 css 中 'position' 值的存在。这意味着，没有“位置”，z-index 是没有意义的

我希望这有帮助

于 2013-06-28T23:20:27.697 回答
0

这是工作的：

<!DOCTYPE html>
<html>
<head>
  <style>
  a.tooltip .tooltip {
    position: absolute;
    top: -1.1em;
    left: 0;
    display: none;
    color: black;
    white-space: nowrap;
  }
  a.tooltip {
    text-decoration: none;
      position: absolute;
    margin-top: -345px !important;
      margin-left: 5px;
      padding-right: 152px;
  }
  a.tooltip:hover .tooltip {
    display: block;
  }
.overflow {
    margin:124px 0px 0px 0px;
    min-height:213px;
    color: #8C8C8B;
    width: 100%;
}

.overflow p {
padding-top: 0px;
}

#onside { padding-top: 7px;} 
#logopakketten {position: relative; z-index: 1; margin-left: 158px; margin-top: -332px; overflow: visible;}     

.column {
display:block;
float:left;
}
</style>

</head>
<body>
  <div class="overflow">
<div id="onside">
<p>Lorem ipsum:</p>
<p>Lorem ipsum:</p>
<p>Lorem ipsum:</p>
<p>Lorem ipsum:</p>
<p>Lorem ipsum:</p>
<p>Lorem ipsum:</p>
<p>Lorem ipsum:</p>
</div>
</div>
<div id="logopakketten">
<div class="column">
  <img src="http://rickgommers.nl/geoffrey/wp-content/themes/interio_child/images/logopakketten/test.png" alt="" /> 
  <a href="#" class="tooltip"><img src="http://rickgommers.nl/geoffrey/wp-content/themes/interio_child/images/infoicoontje.png" alt="" /><span class="tooltip">Tooltip 1</span></a>
</div>
<div class="column">
  <img src="http://rickgommers.nl/geoffrey/wp-content/themes/interio_child/images/logopakketten/test.png" alt="" /> 
  <a href="#" class="tooltip"><img src="http://rickgommers.nl/geoffrey/wp-content/themes/interio_child/images/infoicoontje.png" alt="" /><span class="tooltip">Tooltip 2</span></a>
</div>
<div class="column">
  <img src="http://rickgommers.nl/geoffrey/wp-content/themes/interio_child/images/logopakketten/test.png" alt="" /> 
  <a href="#" class="tooltip"><img src="http://rickgommers.nl/geoffrey/wp-content/themes/interio_child/images/infoicoontje.png" alt="" /><span class="tooltip">Tooltip 3</span></a>
</div>
<div class="column">
  <img src="http://rickgommers.nl/geoffrey/wp-content/themes/interio_child/images/logopakketten/test.png" alt="" /> 
  <a href="#" class="tooltip"><img src="http://rickgommers.nl/geoffrey/wp-content/themes/interio_child/images/infoicoontje.png" alt="" /><span class="tooltip">Tooltip 4</span></a>
</div>

</div>

</body>
</html>
于 2013-06-29T00:07:56.033 回答