如何使用CSS中的边距属性将一个部分移动到另一个部分下方

Question

我有一个 html 页面，主页上有很多部分，我有如下两个部分：

<div class='first section'>

  <a href=''>

    <button style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3> HMT Rice</h3>

          </button>

  </a>

</div>

<div class='second section'>

  <a href=''>

    <button style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3> PKS Rice</h3>

          </button>

  </a>

</div>

我使用 margin-top 属性将第一部分降低一点，但它只是在上方和上方创建了一个空白。

我只想使用 css 制作第二部分下方的第一部分，如下图所示：

无论如何，是否可以使用 z-index 或其他方式将第一部分直接放在下面。请帮忙。提前致谢

Answer 1

您可以尝试使用以下 HTML 和 CSS。.section{&nbsp; &nbsp; position: relative;}.second_section{&nbsp; &nbsp; margin-top: 0px;}.first_section{&nbsp; &nbsp;position: absolute;&nbsp; &nbsp;margin-top: 70px; /* Adjust this margin top pixed according to the space you needed. */}<div class="section">&nbsp; &nbsp; <div class="first_section">&nbsp; &nbsp; &nbsp; <a href=''>&nbsp; &nbsp; &nbsp; &nbsp; <button style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3> HMT Rice</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="second_section">&nbsp; &nbsp; &nbsp; <a href=''>&nbsp; &nbsp; &nbsp; &nbsp; <button style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3> PKS Rice</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div></div>我已通过检查元素解决了您网站中的问题。请遵循以下代码。您应该使用slide-button-wrapper div包装按钮 div 和滑块 div并添加 css。<div class="slide-button-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div class="mainsme" id="grid">&nbsp; &nbsp; &nbsp; <h2 style="font-size:28px;">Shop by Category</h2>&nbsp; &nbsp; &nbsp; <div class="gridmine">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<!---buttons will goes here-->&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <div class="main-row slider-section" style="order: 1;">&nbsp; &nbsp; &nbsp; &nbsp; <banner codes are here>&nbsp; &nbsp; </div></div>@media only screen and (max-width: 600px) {&nbsp; &nbsp; &nbsp; &nbsp; .slide-button-wrapper {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .mainsme{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; order: 2;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .slider-section{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; order: 1&nbsp; &nbsp; &nbsp; &nbsp; }`&nbsp; &nbsp; }