I'm trying to overlapping one div to another div using z-index property

This is my html code snippet:

<div >
    <div >
    </div>

    <div >
    </div>
</div>

This is my css code snippet:

.container-fluid{
    max-width: 650px;
    width: 95%;
    padding: 30px;
    background-color: rgb(250, 252, 253);
    border-radius: 4px;
    border: 1px solid #dfe1e5;
    position: relative;
}

.one{
    height: 400px;
    border: 2px dashed #8b8e96;
    background-color: #fffce5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    margin: 10px auto;
    z-index: 1;
}

.two{
    height: 400px;
    border: 2px dashed #8b8e96;
    background-color: #fffce5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 10px auto;
    position: relative;
    z-index: 2;
    top: 10px;
}

I want to overlap class two div on class one div, but when I apply this attributes the class two div not overlapping on class one div . It's display like block element. Can anyone please tell me why it's happening and how can fix this issue?

CodePudding user response：

inorder for top: 10px; to work on .two, it should have a position of absolute, and when you use absolute you should provide a width ( eg width : 100%) to .two

CodePudding user response：

If you want to overlap the second class two onto the first, you need to change the position. Relative makes it depend on the nearest object; in this case the first class one.

You could fix this by changing the position of your two class; probably something like position: fixed; should do the job!

Edit: have you read this question? It's basically the same as yours with some more information on positioning