CSS:如何将一个div移动到另一个div之上?

Question

我有两个div，A和B。我想使用 CSS 将元素 B 放在元素 A 上方。 如果需要，我可以在父div 中扭曲它们。 我尝试了几件事(浮动，垂直对齐(，但没有成功。

我有什么：

一个

乙

我想要什么：

乙

一个

知道吗？ 谢谢

Answer 1

每当为父元素分配flex显示时，都可以使用order属性执行此操作。

因此，为了做到这一点，你只需要创建两个div并将它们包装在一个父项中，然后让你的父项displayflex到那时，该父项的子项将遵循flex规则。flex项目的可用属性之一是order您可以为每个子项定义该属性并为其提供序列号(1, 2, 3, ...(，然后值较低的子项将首先出现，依此类推。

.container{
display: flex;
flex-direction: column;
}
.first {
order: 2;
}
.second {
order: 1;
}

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

Answer 2

尝试使用容器中的 2 个文本div 执行此操作

body {
font: 400 16px/1.5 sans-serif;
}
.text-wrap {
position: relative;
}
.text-1 {
position: absolute;
top: 1.5em; /* same as line-height */
}
.text-2 {
position: absolute;
top: 0;
}
<div class="text-wrap">
<div class="text-1">
AAA
</div>
<div class="text-2">
BBB
</div>
</div>

Answer 3

.container{
display:flex;
flex-direction: column-reverse;
}
.child{
width: 50px;
height: 50px;
background-color:red;
margin: 10px;
}

<div class="container">
<div class="child">a</div>
<div class="child">b</div>
</div>

使用弹性方向，您可以移动容器的子项