'Why the z index property not working to overlapping one div on another div?

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

This is my html code snippet:

<div class="container-fluid">
    <div class="one">
    </div>

    <div class="two">
    </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?

htmlcssz-indexoverlapping


Solution 1:[1]

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Faizal Hussain
Solution 2 sidereal

Related Questions