如何使用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{

    position: relative;

}

.second_section{

    margin-top: 0px;

}

.first_section{

   position: absolute;

   margin-top: 70px; /* Adjust this margin top pixed according to the space you needed. */

}

<div class="section">

    <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>

</div>

我已通过检查元素解决了您网站中的问题。请遵循以下代码。

您应该使用slide-button-wrapper div包装按钮 div 和滑块 div并添加 css。

<div class="slide-button-wrapper">            

    <div class="mainsme" id="grid">

      <h2 style="font-size:28px;">Shop by Category</h2>

      <div class="gridmine">

         <!---buttons will goes here-->

      </div>

    </div>

                     

    <div class="main-row slider-section" style="order: 1;">

        <banner codes are here>

    </div>

</div>

@media only screen and (max-width: 600px) {

        .slide-button-wrapper {

            display: flex;

            flex-direction: column;

        }

        

        .mainsme{

          order: 2;

        }

        .slider-section{

          order: 1

        }`

    }