如何在 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 属性将第一部分降低了一点，但它只是在上方创建了一个白色 space。

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

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

Answer 1

您可以使用 order property

重新排列元素

注意父级必须是display: flex;

.container {
  display: flex;
  flex-direction: column;
}

.container div {
  width: 100px;
  height: 50px;
  text-align: center;
}

.first {
  background-color: lightgreen;
  order: 2;
}

.second {
  order: 1;
  background-color: lightblue;
}

<div class="container">
  <div class="first">first</div>
  <div class="second">second</div>
</div>

Answer 2

您可以尝试使用以下 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
        }`
    }

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

how to move a section below another using margin property in css

html

javascript

css

margin

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

how to move a section below another using margin property in css

html

javascript

css

margin

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