在不影响div高度的情况下在悬停div上显示内容

Question

我正在建立电子商务网站的产品详情页面。为此，我使用Laravel和Bootstrap 3。

我试图通过附加到它的末尾来显示同一div中的产品的变体。但是，当数据附加到产品div时，div的高度会增加。这是一种不受欢迎的行为。我想要的是产品变体选项显示在活动div下方的其他div之上。

以下是我尝试设计的部分代码：

<td class="inputCol2">
  <select name="'product<?= $i ?>">
     <?php
       echo $options;
     ?>
   </select>
 </td>

这是css

<div class="col-xs-6 col-sm-3 col-md-2 col-lg-2 text-left product-tile product-tile-hovering">
<div class="product-inner">
    <div id="pid" class="hidden">3</div>
    <img src="/images/small/1444895511.jpg" alt="alt stuff" class="img-responsive">
    <br>
    <strong>Rs. 200</strong>
    <p class="product-title-tile">
        Close Up Diamond Attraction Power White Toothpaste &nbsp; 200g
    </p>

    <button type="button" class="btn btn-material-green btn-xs">
        <span class="glyphicon glyphicon-shopping-cart product-tile"></span>Cart
    </button>
    <button type="button" class="btn btn-material-blue btn-xs">
        <span class="glyphicon glyphicon-star product-tile"></span>List
    </button>
    <p class="more-variant-message">See 6 more variants</p>

    <div class="variation-options">

        <table class="table">
            <tbody>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 200g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 225 / 250g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 300g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 150 / 400g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 2000 / 450g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 500g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 550g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table">
            <tbody>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 200g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 225 / 250g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 300g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 150 / 400g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 2000 / 450g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 500g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 550g</td>
                    <td class="text-right">
                        <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

请参阅附图。

我现在被困在这里几个小时。任何帮助都会非常感激。

谢谢。

Answer 1

这可能不是唯一的解决方案，但我会使用这些属性：

.variation-options {
    postion: absolute;
    z-index: <greater than z-index of the elements that need to be obscured by the menu>
}

相对定位确实不会将元素置于正常流程之外，但允许在属性top，bottom，left和{的帮助下相对于其容器移动元素{1}}。

Answer 2

父亲应该是亲戚，你的.variation-options绝对是

现在，如果您将鼠标悬停在清除按钮上，然后应用清除按钮顶部，则可以使用元素示例。

或 示例：http://jsfiddle.net/miljenko/xTZ87/我在jsfiddle上找到了

  

您也可以使用bootstrap popover并将此表格应用于html中   工具提示模板

请参阅popover示例http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover_pos&stacked=h

您在popover中的示例= http://jsfiddle.net/kevalbhatt18/t0pmu68g/3/

＆＃13;

＆＃13;

.variation-options {
  position: absolute;
  background-color: #B1B1B1;
  box-shadow: 2px 3px 8px 1px #808080;
  top:10px
}

＆＃13;

<div class="col-xs-6 col-sm-3 col-md-2 col-lg-2 text-left product-tile product-tile-hovering">
  <div class="product-inner">
    <div id="pid" class="hidden">3</div>
    <img src="/images/small/1444895511.jpg" alt="alt stuff" class="img-responsive">
    <br>
    <strong>Rs. 200</strong>
    <p class="product-title-tile">
      Close Up Diamond Attraction Power White Toothpaste &nbsp; 200g
    </p>

    <button type="button" class="btn btn-material-green btn-xs">
      <span class="glyphicon glyphicon-shopping-cart product-tile"></span>Cart
    </button>
    <button type="button" class="btn btn-material-blue btn-xs">
      <span class="glyphicon glyphicon-star product-tile"></span>List
    </button>
    <p class="more-variant-message">See 6 more variants</p>

    <div class="variation-options">

      <table class="table">
        <tbody>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 200g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 225 / 250g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 300g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 150 / 400g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 2000 / 450g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 500g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 550g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      <table class="table">
        <tbody>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 200g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 225 / 250g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 300g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 150 / 400g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 2000 / 450g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 500g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="product-variation-tile-tr" colspan="2">Rs. 200 / 550g</td>
            <td class="text-right">
              <button type="button" class="btn btn-material-green btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;