How can I display child of one element above its sibling?

Question

There are two divs side by side with same zIndex. I want to display a child div of first div over the second div kinda like an overlay. But no matter what zIndex i give to the child div, it remains below the second div.

.parent {
  border: 5px dotted red;
  height: 500px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: start;
  padding: 50px;
  background-color: black;
}

.child {
  border: 5px solid blue;
  height: 100px;
  width: 100px;
  margin: 0 0 50px 50px;
  background-color: midnightblue;
  position: relative;
  z-index: 10;
}

.child-hover {
  position: absolute;
  border: 3px solid green;
  border-radius: 40px;
  height: 60px;
  width: 80px;
  top: 0;
  left: 90%;
  background-color: green;
  z-index: 9999 !important;
}

<div class="parent">
  <div class="child">
    <div class="child-hover"></div>
  </div>
  <div class="child"></div>
</div>

(Fiddle link)

In this fiddle you'll see two blue squares and a green ellipse. Part of green ellipse is hidden beneath the second blue square. I understand that's because the second div came after the first div in the html. I don't want that to happen.

Edit: I do not wish to remove the zIndex from .child.

Is changing the order of the element in the DOM an option? (Keeping them in the same position visually) — DBS, Jul 06 '22 at 10:19
@DBS well, I'm creating these divs by javascript and number of these divs is not pre defined, so even if i change the order, it will cause issue. — S V, Jul 06 '22 at 10:22
read the duplicate until the end and you will find a few tricks with 3D transform — Temani Afif, Jul 06 '22 at 13:19

Jaswinder Kaur · Answer 1 · 2022-07-06T10:30:57.527

Remove .child class z-index

 .parent {
            border: 5px dotted red;
            height: 500px;
            width: 500px;
            display:flex;
            justify-content: center;
            align-items: start;
            padding: 50px;
            background-color: black;
        }
        .child {
            border: 5px solid blue;
            height: 100px;
            width: 100px;
            margin: 0 0 50px 50px;
            background-color: midnightblue;
            position: relative;
        }

        .child-hover {
            position: absolute;
            border: 3px solid green;
            border-radius: 40px;
            height: 60px;
            width: 80px;
            top: 0;
            left: 90%;
            background-color: green;
            z-index: 9999 !important;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown</title>
</head>
<body>

    <div class="parent">
        <div class="child">
            <div class="child-hover">

            </div>
        </div>
        <div class="child"></div>
    </div>
</body>
</html>

okk then dont need to add first child style remove child z-index 10 — Jaswinder Kaur, Jul 06 '22 at 10:30

score 2 · Answer 2 · answered Jul 06 '22 at 10:26

All you have to do is remove the z-index in the .child class. Please try this.

.parent {
  border: 5px dotted red;
  height: 500px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: start;
  padding: 50px;
  background-color: black;
}

.child {
  border: 5px solid blue;
  height: 100px;
  width: 100px;
  margin: 0 0 50px 50px;
  background-color: midnightblue;
  position: relative;

}

.child-hover {
  position: absolute;
  border: 3px solid green;
  border-radius: 40px;
  height: 60px;
  width: 80px;
  top: 0;
  left: 90%;
  background-color: green;
  z-index: 9999 !important;
}

<div class="parent">
  <div class="child">
    <div class="child-hover"></div>
  </div>
  <div class="child"></div>
</div>

Abdelrhman Mohamed · Answer 3 · 2022-07-06T11:46:46.940

0

z-index works with the positioned elements on the same level. Try adding this to your CSS code.

.child:first-of-type {
  z-index: 11;
}

edited Jul 06 '22 at 11:46

answered Jul 06 '22 at 11:45

Abdelrhman Mohamed

19
2

How can I display child of one element above its sibling?

3 Answers3