Css 如何创建与其他元素重叠的弹出窗口？

假设我有一堆包含一些元素的行。当用户将鼠标悬停在某个元素上时，该元素下方会显示一个弹出信息。此外，弹出窗口不应使其他元素移动，它必须与其他元素重叠，但不能移动它们

如何做到这一点

.ball:悬停{
边框：1px纯红；
}
.ball:hover.info{
显示：块；
}
.info{
z指数：1；
显示：无；
单词包装：打断单词；
边缘顶部：1.1米；
}

此弹出信息应与底部元素重叠，但不能移动它。
此弹出信息应与底部元素重叠，但不能移动它。
此弹出信息应与底部元素重叠，但不能移动它。

像这样吗？给你的球一个1px的实心透明边框和一个绝对位置

.ball{
边框：1px实心透明；
}
.球：悬停{
边框：1px纯红；
}
.ball:hover.info{
显示：块；
}
.info{
z指数：1；
显示：无；
单词包装：打断单词；
页边顶部：1px；
垫面：1.1米；
位置：绝对位置；
背景色：#fff；
}

此弹出信息应与底部元素重叠，但不能移动它。
此弹出信息应与底部元素重叠，但不能移动它。
此弹出信息应与底部元素重叠，但不能移动它。

html

这里有一个链接供参考

---

尝试添加

最大高度：128px（球图像高度）到
.ball
。这就是你的意思吗？确保使用位置属性
absolute
或
fixed
…是的，但除此之外，它应该有一个白色背景，以便底部球的一部分不可见。我编辑了它，并添加了一个白色背景色。我还将您的边距改为填充边距，然后在顶部添加一个1px的边距，以说明红色边框。
<div class='row'>
  <div class='ball col-xs-4'>
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'>
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div>
  </div>

  <div class='ball col-xs-4'>
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'>
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div>
  </div>

  <div class='ball col-xs-4'>
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'>
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div>
  </div>

   <div class='ball col-xs-4'>
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'>
  </div>

  <div class='ball col-xs-4'>
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'>
  </div>
</div>

.ball:hover {
  border: 1px solid red;
}

.ball:hover .info {
  display: block;
}
.ball
{
  position: relative;
  border:1px solid transparent;
}
.info {
  position: absolute;
  z-index: 1;
  display: none;
  word-wrap: break-word;
  margin-top: 1.1em;
  bottom:0;
  background-color: #fff;

}