Question

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

如何实现这一目标？

.ball:hover {
  border: 1px solid red;
}

.ball:hover .info {
  display: block;
}

.info {
  z-index: 1;
  display: none;
  word-wrap: break-word;
  margin-top: 1.1em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<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>

Answer 1

喜欢这个？给你的球一个1px实心透明边框，.info一个绝对位置。

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<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>

Answer 2

HTML

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

CSS

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

}

这里是链接供参考 codepen link

如何制作一个与其他元素重叠的弹出窗口？

2 个答案: