JSFiddle - React, Tailwind, and code Playground

lynda.com CSS #2: Natural stacking order z-index

by totoromaum

HTML

<p>body content</p>
<div class="block1">block 1</div>
<div class="block2">block 2</div>
<div class="float">
  <p>float</p> 
  <span class="inline">inline</span>
</div>
<div class="position">position</div>

CSS

/* root element */
html {
  background:black;
}
/* viewport */
body {
  background: white;
}
.block1 {
  /* display: none; */
  background: pink;
  position: relative;
  z-index:100;
}
.block2 {
  /* display: none; */
  background: red;
  margin: -60px 0 0 20px;
  position:relative;
  z-index: 200;
}
.float {
  /* display: none; */
  background: lightblue;
  float: left;
  margin: -150px 0 0 100px;
}
.inline {
  /* display: none; */
  background: blue;
  color: white;
  padding: 10px 40px 10px 10px;
}
.position {
  /* display: none; */
  background: orange;
  position: relative;
  left: 180px;
  top: -165px;
  height: 110px;
}

/* shared div styles */
div {
  padding: 20px;
  width: 200px;
  height: 80px;
}

JavaScript

/*
NATURAL STACKING ORDER

1. The root element (<html>)
2. The viewport (<body>)
3. Block level elements in the normal page flow
4. Floated elements, not positioned
5. Inline descendant elements in the normal flow
6. Positioned elements
*/