
Layers with different opacity are a staple of digital compositing systems but weirdly CSS is terrible at it.  The stack/layer CSS in `static/global.csS` implements a simple method using `display: grid` to place elements into a single cell.  The CSS grid system will then correctly layer each element in a stack.  The elements also are set to `position:relative` so you can change their `z-index` to shuffle them around.  Alternatively, you can simply set one of the children to `class="top"` and that one element will be on top.


If you don't set a `background-color` color then the layers will be transparent.  You can also use `opacity` to hide or fade the layers in the stack.


The CSS that is making this work is below (but look in `static/global.css` to confirm it's still done this way.

```
.stacked &lbrace;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "cover";
}
.stacked .layer &lbrace;
  width: 100%;
  position: relative;
  grid-area: cover;
}
.stacked .top &lbrace;
  z-index: 10;
}
```
