0

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?

anjally
  • 1
  • 1

2 Answers2

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

Faizal Hussain
  • 1,551
  • 2
  • 10
  • 18
0

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

sidereal
  • 36
  • 6