0

Why does "b" lays over "a" if they're on the same z-index? instead of laying under "a"

It seems that I read all materials on developer.mozilla.org and w3.org explaining z-index property but I still can't explain why the green square overlaps yellow one.

From one hand

Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or on the elements that occur after them in the source code. An absolutely positioned element will therefore overlap other content unless you take action to prevent it. Sometimes, of course, this overlap is exactly what you desire, but you should be aware of it, to make sure you are getting the layout you want!

From another hand

When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).

However it is not clearly described what happens when two elements share the same z-index value. In the example both elements doesn't have any specific z-index value so z-index equals "0" zero by default.

Why does "b" lays over "a" if they're on the same z-index? instead of laying under "a"

* {
  padding: 0;
  margin: 0;
}

.a,
.b {
  width: 200px;
  height: 200px;
  font-size: 36px;
}

.a {
  background-color: grey;
  position: absolute;
}

.b {
  background-color: green;
  margin-left: 50px;
  position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
</body>
</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Redgard
  • 1
  • 2
  • from the link above ^ *All positioned, opacity or transform descendants, in tree order that fall into the following categories: All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.* <-- Note the **tree order** – Temani Afif Jan 31 '21 at 23:54

1 Answers1

1

It's because b is after/underneath a in your html.

They are both on the same z-level. You can test this by setting different z-indexes on a or b. ..but they kind of exist on different planes. Each one (absolute section) is treated separately and positioned on the screen based on your css.

Use top,bottom,left & right to achieve this.

If you enter nothing for position I think it defaults to top:0, left:0.

So each dive (a & b ) is pulled out of the rest of the elements and stuck in the top left corner. (You used margin to shift over element b but they still overlap a bit).

The tie-breaker for which element should be on top is the which element comes last in your html.

ShanieMoonlight
  • 1,623
  • 3
  • 17
  • 28
  • Yes, I see the DOM. So you mean if two elements with pure "position:absolute" property are on the same z-index they will overlap? Doesn't this mean that they lay on different "z" levels? – Redgard Jan 29 '21 at 22:39
  • @Redgard I just edited that answer to give more info. – ShanieMoonlight Jan 30 '21 at 13:58