How to pin a div in top of other div

Question

i am trying to make the grey div covered by the white div, in other word, i wan the white div be the top layer in my page, not like this screenshot

i am using Bootstrap 4 in this layout

.form-login {
    text-align: center;
    background: #ffffff;
    border-radius: 25px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.biside-form-login {
    text-align: left;
    background: #cecece;
    border-radius: 25px;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: -10px;
}

<div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
        <div class="col-4 form-login">
         this is the white div
        </div>
        <div class="col-8 biside-form-login">
              this is the grey
        </div>
    </div>
</div>

Add a `z-index` to the white div – MattHamer5 Jan 27 '21 at 09:20 — MattHamer5, Jan 27 '21 at 09:20

score 2 · Accepted Answer · answered Jan 27 '21 at 09:20

you can use 'z-index' like this

.form-login {
    position: relative;
    text-align: center;
    background: #ffffff;
    border-radius: 25px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
    z-index:999;
}

score 2 · Answer 2 · answered Jan 27 '21 at 09:23

2

you can use z-index in the white div

answered Jan 27 '21 at 09:23

mahmoud elgazar

46
3

score 1 · Answer 3 · answered Jan 27 '21 at 09:22

1

Add position: relative; and z-index: 999; to the form-login div:

.form-login {
  position: relative;
  z-index: 999;
}

Codepen: https://codepen.io/manaskhandelwal1/pen/MWjNLxx?editors=1100

answered Jan 27 '21 at 09:22

Manas Khandelwal

3,790
2
11
24

How to pin a div in top of other div

3 Answers3