css - 为什么元素会破坏我网站的布局

Question

我创建了一个气泡，当您将鼠标悬停在它上面时会显示它(实际上，只有第一个元素)。问题是，气泡破坏了布局并移动了其余元素。不知道怎么解决，求助。请帮助

#products #productsGrid {
      width: 100%;
      list-style: none;
      padding: 0; 
      }
      #products #productsGrid li {
        display: inline-block;
        line-height: 5px;
        width: 24%;
        height: 200px;
        margin: 15px 0; }
        #products #productsGrid li header h5 {
          margin: 0;
          line-height: 1px; }
        #products #productsGrid li header .description {
          font-size: 10px;
          line-height: 10px; }
        #products #productsGrid li button {
          border-radius: 6px;
          border-style: none;
          padding: 2px 20px;
          background-color: #d40505;
          box-shadow: inset 0 -20px 10px -10px rgba(0, 0, 0, 0.3), inset 0 10px 10px -10px rgba(0, 0, 0, 0.3);
          color: white;
          float: left;
          width: 110px;
          margin: 0;
          padding: 6px 20px; }
          #products #productsGrid li button span {
            font-weight: bold; }
        #products #productsGrid li .wojna_domowa p {
          display: none; }
        #products #productsGrid li .wojna_domowa:hover p {
          display: block; }
        #products #productsGrid li .wojna_domowa:hover .bubble {
          position: relative;
          width: 180px;
          height: 210px;
          padding: 0px;
          background: #FFFFFF;
          top: -130px;
          right: -98px;
          border-radius: 6px;
          border: #00ABC8 solid 2px; }
        #products #productsGrid li .wojna_domowa:hover .bubble:after {
          content: '';
          position: absolute;
          border-style: solid;
          border-width: 12px 19px 12px 0;
          border-color: transparent #FFFFFF;
          display: block;
          width: 0;
          z-index: 1;
          left: -19px;
          top: 20px; }
        #products #productsGrid li .wojna_domowa:hover .bubble:before {
          content: '';
          position: absolute;
          border-style: solid;
          border-width: 13px 20px 13px 0;
          border-color: transparent #00ABC8;
          display: block;
          width: 0;
          z-index: 0;
          left: -22px;
          top: 19px; }
      #products #productsGrid li:nth-child(1) {
        margin: 0 auto 25px auto; }
      #products #productsGrid li:nth-child(2) {
        margin: 0 auto 25px auto; }
      #products #productsGrid li:nth-child(3) {
        margin: 0 auto 25px auto; }
      #products #productsGrid li:nth-child(4) {
        margin: 0 auto 25px auto; }

<div id="products">
  <ul id="productsGrid">
    <li>
      <div class="wojna_domowa">
        <header>
          <h5>Wojna domowa</h5>
          <br><br>
          <span class="description">
            Easy Virtue (2008)
            <br><br>
            produkcja: Wielka Brytania
            gatunek: komedia rom.
            <br><br>
          </span>
        </header>
        <button type="button"><span>Więcej</span></button> 

        <div class="bubble">

          <p>phokuh</p>

        </div>

      </div>
    </li>
    <li>
      <header>
        <h5>Stary, kocham Cie</h5>
        <br><br>
        <span class="description">    
          I love You, man (2008)
          <br><br>
          produkcja: USA<br>
          gatunek: komedia rom.
          <br><br>
        </span>
      </header>
      <button type="button"><span>Więcej</span></button> 
    </li>
    <li>
      <header>
        <h5>Kac Vegas</h5>
        <br><br>
        <span class="description">
          The Hangover (2008)
          <br><br>
          produkcja: Niemcy<br>
          gatunek: komedia.
          <br><br>
        </span>
      </header>
      <button type="button"><span>Więcej</span></button> 
    </li>
    <li>
      <header>
        <h5>Wojna domowa</h5>
        <br><br>
        <span class="description">
          Easy Virtue (2008)
          <br><br>
          produkcja: Wielka Brytania
          gatunek: komedia rom.
          <br><br>
        </span>
      </header>
      <button type="button"><span>Więcej</span></button> 
    </li>
    <li>
      <header>
        <h5>Wojna domowa</h5>
        <br><br>
        <span class="description">
          Easy Virtue (2008)
          <br><br>
          produkcja: Wielka Brytania
          gatunek: komedia rom.
          <br><br>
        </span>
      </header>
      <button type="button"><span>Więcej</span></button> 
    </li>
    <li>
      <header>
        <h5>Stary, kocham Cie</h5>
        <br><br>
        <span class="description">    
          I love You, man (2008)
          <br><br>
          produkcja: USA<br>
          gatunek: komedia rom.
          <br><br>
        </span>
      </header>
      <button type="button"><span>Więcej</span></button> 
    </li>
    <li>
      <header>
        <h5>Kac Vegas</h5>
        <br><br>
        <span class="description">
          The Hangover (2008)
          <br><br>
          produkcja: Niemcy<br>
          gatunek: komedia.
          <br><br>
        </span>
      </header>
      <button type="button"><span>Więcej</span></button> 
    </li>
    <li>
      <header>
        <h5>Wojna domowa</h5>
        <br><br>
        <span class="description">
          Easy Virtue (2008)
          <br><br>
          produkcja: Wielka Brytania
          gatunek: komedia rom.
          <br><br>
        </span>
      </header>
      <button type="button"><span>Więcej</span></button> 
    </li>
  </ul>
</div>

Answer 1

添加以下 css 可能会有所帮助

    li {
      position: relative;
      vertical-align: top;
    }
    .bubble {
      position: absolute;
    }

编辑

通过你的 css 我发现 bubble 类我已经有了 position: absolute 悬停所以你只需要添加属性到 li 只有。