<div class="wrapper">
    <article class="flow">
      <h1>Default <code>z-index</code> behaviour</h1>
      <figure class="callout">
          If no value for <code>z-index</code> is set, the browser will use the
          document source order to dictate <code>z-index</code> instead.
          This demo has 3 empty <code>&lt;div&gt;</code> elements, with negative
          margin, making them overlap. The later elements sit on top of the earlier
      <div class="demo">
.demo > * {
  width: 250px;
  height: 200px;

.demo > * + * {
  margin-top: -150px;
  opacity: 0.8;
  box-shadow: 0 -1px 10px rgba(0 0 0 / 60%);

.demo > :first-child {
  background: aliceblue;
  border: 2px solid lightblue;

.demo > :nth-child(2) {
  background: pink;
  border: 2px solid hotpink;

.demo > :last-child {
  background: wheat;
  border: 2px solid gold;

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.