Prevent div from moving other div on hover-CodePudding

I have a speech bubble that pops up when hovering over a div. However, when this hover action is executed it moves the div under it. How can I prevent this from happening?

Expected result: Hover will not move div under it and will overlap div under it if necessary.

Here is my code so far. Any help would be appreciated, thanks.

#container {
    background: white;
    left: 97px;
    border-radius: 5px;
    min-width: 180px;
    min-height: 100px;
    position: absolute;
    z-index: 999;
    font-size: 14px;
  }
#item {
    position: relative;
    padding: 12px 15px 12px 30px;
    display: flex;
    justify-content: space-between;
}
  #plus:hover {
    position: relative;
      background-color: grey;
    margin: 0 auto;
    width: 75%;
    
    text-align:center;
    padding: 7px;
    font-size: 15px;
    color: white;
    border-radius: 5px;
    z-index:1;
  }

#plus:after {
    content:'';
    position: absolute;
    display:block;
    top: -20px;
    margin-left: -5%;
    bottom: 80%;
    left: 50%; 
    border: .75rem solid transparent;
    border-top: none;
    z-index:1;
    border-bottom-color: grey;
}

 <div id="container">
   <div id="item">Line 1</div>
   <div id="plus"></div>
   <div id="item">Line 2</div>
 </div>

CodePudding user response：

#container {
    background: white;
    left: 97px;
    border-radius: 5px;
    min-width: 180px;
    min-height: 100px;
    position: absolute;
    z-index: 999;
    font-size: 14px;
  }
#item {
    position: relative;
    padding: 12px 15px 12px 30px;
    display: flex;
    justify-content: space-between;
}
  #plus:hover {
    position: absolute;
      background-color: grey;
    margin: 0 auto;
    width: 75%;
    left:2vw;
    top:6.5vh;
    text-align:center;
    padding: 7px;
    font-size: 15px;
    color: white;
    border-radius: 5px;
    z-index:1;
  }

#plus:after {
    content:'';
    position: absolute;
    display:block;
    top: -20px;
    margin-left: -5%;
    bottom: 80%;
    left: 50%; 
    border: .75rem solid transparent;
    border-top: none;
    z-index:1;
    border-bottom-color: grey;
}

<div id="container">
   <div id="item">Line 1</div>
   <div id="plus"></div>
   <div id="item">Line 2</div>
 </div>

CodePudding user response：

You can change

#plus:hover {
  position: relative;

#plus:hover {
  position: absolute;

#container {
  background: white;
  left: 97px;
  border-radius: 5px;
  min-width: 180px;
  min-height: 100px;
  position: absolute;
  z-index: 999;
  font-size: 14px;
}

#item {
  position: relative;
  padding: 12px 15px 12px 30px;
  display: flex;
  justify-content: space-between;
}

#plus:hover {
  position: absolute;
  background-color: grey;
  margin: 0 auto;
  width: 75%;
  text-align: center;
  padding: 7px;
  font-size: 15px;
  color: white;
  border-radius: 5px;
  z-index: 1;
}

#plus:after {
  content: '';
  position: absolute;
  display: block;
  top: -20px;
  margin-left: -5%;
  bottom: 80%;
  left: 50%;
  border: .75rem solid transparent;
  border-top: none;
  z-index: 1;
  border-bottom-color: grey;
}

<div id="container">
  <div id="item">Line 1</div>
  <div id="plus"></div>
  <div id="item">Line 2</div>
</div>