无法将一个div排列在另一个之上

<style>
    .container {
        position: relative;
    }
    .div1 {
        position: absolute;
        top: 0;
        left: 0;
    }
    .div2 {
        position: absolute;
        top: 50px;
        left: 50px;
    }
</style>
<div class="container">
    <div class="div1">这是要排在上方的div</div>
    <div class="div2">这是要排在下方的div</div>
</div>

<style>
    .div1 {
        position: relative;
        z-index: 2;
    }
    .div2 {
        position: relative;
        z-index: 1;
    }
</style>
<div class="div1">这是要排在上方的div</div>
<div class="div2">这是要排在下方的div</div>

<style>
    .container {
        display: flex;
    }
    .div1 {
        order: 1;
    }
    .div2 {
        order: 2;
    }
</style>
<div class="container">
    <div class="div1">这是要排在上方的div</div>
    <div class="div2">这是要排在下方的div</div>
</div>