时间戳

首页 > 解决方案 > CSS 将 div 置于绝对 div 之下

javascript - CSS 将 div 置于绝对 div 之下

问题描述

编辑：这是现场网站：https ://snidel.com/Form/Product/ProductDetail.aspx?shop=0&pid=SWFS195138&vid=&bid=SND01&cat=SKE001&swrd=

我正在尝试将这个绿色框 div 放在 div 下。我不知道为什么它会在中间，它看起来像

我想要完成的是

这是下面的代码

<div class="block-btn">
  <div class="btn secondary store">
    <a href="" onclick="javascript:show_popup_window('/Form/Product/RealShopProductStockList.aspx?pid=SWFS195138&amp;vid=SWFS19513800321000', 630, 900, true, true, 'ProductRealShopStockList');return false;">
      <span class="ico"><img src="/Contents/ImagesPkg/common/ico_detail_store_01.svg" alt="" class="svg"></span>店舗在庫
    </a>
  </div>

  <div style="position: absolute;top: 34%;right:0;">
    <p style="font-size: 16px;display: inline-block;letter-spacing: 0.08em;font-weight: 400;font-family: futura-pt;">TOTAL

      <img src="/Contents/ImagesPkg/snidel/common/ico_favorite_02.svg" width="20" style="padding: 0 3px;">
      33

    </p>
  </div>
  <div id="greenbox" style="  
  display: block;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;">
  </div>
</div>

前一个 div 上的样式我不能更改，只能在绿框 div 下编辑样式。我尝试调整位置和显示，但它们都不起作用。

标签： javascripthtmlcss

解决方案

使用 display:block

使用 display:block 的元素将始终放置在其年长兄弟姐妹之下和年幼兄弟姐妹之上。在这种情况下，年长的兄弟是“block-btn”，所以绿色框出现在它的下方。

<div id="greenbox" style="display: block; width: 200px; height: 75px; border: 5px solid green;">
</div>

推荐阅读