OnClick transition effects, and understanding the markup code

HTML & CSS
124

Answer this for me:

If z-index 1 is wrong, how come it works?
Wouldn’t it not work if it was wrong?


.playf,
.pausef {
  position: relative;
  z-index: 1;
}
125

Please run this code in your browser.

Seeing it, along with reading the stacking level link I posted, will help you see what is happening.

The same concept of stacking applies to all of your examples that use absolute positioning and z-index.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Z-Index and Stacking Levels</title>
<style>
.box {
  position:absolute;
  top:100px;
  left:100px;
  width:200px;
  height:200px;
  font-weight:700;
  text-align:center;
}
.one {
 z-index:1;
 background:Tomato;
}
.two {
  z-index:1;
  top:200px;
  left:200px;
  background:LawnGreen;
}
.three {
  z-index:0;
  top:300px;
  left:300px;
  background:LimeGreen;
  padding-top:160px;
  height:40px;
}
.box div {    /*child div of AP parent*/
  position:absolute;
  z-index:999;
  top:50px;
  left:50px;
  width:150px;
  height:100px;
  background:Yellow;
}
.three div{
  padding-top:50px;
  height:50px ;
}
</style>
</head>

<body>

<h1>Z-Index and Stacking Levels</h1>

<div class="box one">
    box-1 z-index: 1;
    <div>
        box-1 > child z-index:999;
    </div>
</div>
<div class="box two">
    box-2 z-index: 1;
    <div>
        box-2 > child z-index:999;
    </div>
</div>

<div class="box three">
    box-3 z-index: 0;
    <div>
        box-3 > child z-index:999;
    </div>
</div>

</body>
</html>
3 Likes
126

I just tested these and saw no visual difference.

z-index: 1;
z-index: 1;


z-index: 1;
z-index: 2;
127

I see how it’s out of order.

Now I understand.

128

I’m showing you how it’s possible that z-index:1; can sit on TOP of z-index:999; due to the parent-child relationship and the natural source order of the html

A positioned child can never rise above it’s positioned parent’s stacking level

2 Likes
129

But there should not be this:

z-index: 1;
z-index: 1;

It should be this instead:

z-index: 1;
z-index: 2;
130
4 Likes
131

@TechnoBear, That is a good link. :slight_smile:

It is a well written reference. Plenty of good illustrations and it even goes into the stacking levels of non-positioned elements.

3 Likes
132

I made an edit to this:

I changed this:

.playButtonb.activeb .linesb::before,
.playButtonb.activeb .linesb::after {
  background: #e77d19;
}

to this:

.activeb .linesb::before,
.activeb .linesb::after {
  background: #e77d19;
}
133

Are these adjustments fine that I’ve made to these 2 codes?

With this one I changed:
.playButtone.activee {

This

.playButtone.activee {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: #000000;
  cursor: pointer;
  fill: #aaff00;
}

to:

This:
.activee {

.activee {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: #000000;
  cursor: pointer;
  fill: #aaff00;
}

With this one I removed

.playButtona from .activea
https://jsfiddle.net/c1cLr7aq/5/


.activea {
}

.activea::before,
.activea::after {
}

.activea::before {
}

.activea::after {
}
134

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.