我有一个html页面，其中有很多部分在首页，我有两个部分如下:
null
<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>null
我使用margin-top属性使第一节稍微低一点，但它只是在上面创建了一个空白。
我只想用css制作第一部分，第二部分，就像下面的图片:
可以使用order属性重新排列元素
请注意，父级必须是display:flex；
null
.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>
您可以尝试使用以下HTML和CSS。
null
.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>