Question

我正在尝试与此人一样：css positioning of an info-note on the top of an icon

但在我的情况下，我在其他图片上方有信息图标，请参阅此jsBin：http://jsbin.com/usuyu3/5

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

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

当使用position：absolute时，我可以在表格上方获得1个图标，但其他图标变得不可见。

我如何解决这个问题？

Answer 1

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

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

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

我希望这会有所帮助

Answer 2

这是工作中的一个：

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

在其他图像上定位信息图标

2 个答案: