Can't overlap Sibling element

Question

I have a problem with positioning, I'd like to put the .sibling-child over .parent without modifying the current z-index. Is there a way to do this in CSS?

Here the jsfiddle with the problem. http://jsfiddle.net/8hb6xgLj/1/

.parent {
  width: 300px;
  height: 100px;
  background: #333;
  position: relative;
  z-index: 10;
}

.child {
  top: 60px;
  position: absolute;
  width: 50px;
  height: 80px;
  background: red;
}

.sibling {
  width: 300px;
  height: 100px;
  background: #ccc;
  position: relative;
  z-index: 9;
}

.sibling-child {
  top: 10px;
  position: absolute;
  width: 70px;
  height: 80px;
  background: blue;
}

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

  </div>
</div>
<div class="sibling">
  <div class="sibling-child">

  </div>
</div>

Please define what you mean by "over." You mean the sibling-child should overlap the parent (i.e. appear within the boundaries of the parent)? — MarsAtomic, Nov 17 '18 at 01:54
@MarsAtomic Yes the sibling-child should be over parent without modifying z-index — John Mejia, Nov 17 '18 at 01:56

Zuber · Answer 1 · 2018-11-17T06:27:15.857

0

In your example, both div elements are positioned with different z-index, This means they are stacked in the order they appear in the markup, with the first declared element having the highest stacking index.

Therefore, according to that definition, there is no chance that .sibling-child will appear above .parent.

See the W3C specification on stacking context for more information. Note point 9 in particular:

Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order.

edited Nov 17 '18 at 06:27

answered Nov 17 '18 at 06:08

Zuber

3,393
1
19
34

hope my answer will help you to understand about the stacking of `z-index` @John Mejia – Zuber Nov 17 '18 at 06:21

score -1 · Answer 2 · answered Nov 17 '18 at 02:17

This is the only thing I can think of.

transform: translate3d(0, -100px, 20px);

.parent {
  width: 300px;
  height: 100px;
  background: #333;
  position: relative;
  z-index: 10;
}

.child {
  top: 60px;
  position: absolute;
  width: 50px;
  height: 80px;
  background: red;
}

.sibling {
  width: 300px;
  height: 100px;
  background: #ccc;
  position: relative;
  z-index: 9;
}

.sibling-child {
  top: 10px;
  position: absolute;
  width: 70px;
  height: 80px;
  background: blue;
  transform: translate3d(0, -100px, 20px);
}

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

  </div>
</div>
<div class="sibling">
  <div class="sibling-child">

  </div>
</div>

But the `.sibling-child` is under the `.parent` and I need it over the `.parent` — John Mejia, Nov 17 '18 at 03:41
I'm not sure what browser you are running, but the code above most definitely has the blue square over the black. — Will, Nov 17 '18 at 06:45

Can't overlap Sibling element

2 Answers2