CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Alex Nikolsky
Alex Nikolsky

Reputation: 2179

How to make a popup that overlaps other elements?

Suppose I've got a bunch of rows that contain a few elements. When user hover over some element, a popup info should show up beneath the element. Besides, that popup isn't supposed to make other elements move, it has to overlap the other elements but not shift them.

How can this be achieved?

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

Upvotes: 0

Views: 2116

Answers (2)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

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;

}

here is link for reference codepen link

Upvotes: 0

Sensoray
Sensoray

Reputation: 2430

Like this? Give your ball a 1px solid transparent border and the .info a position of absolute.

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

Upvotes: 1

Related Questions