How do I use the z-index properly?

Question

See this page here:

http://www.blakearchive.org/blake/public/exhibits/canterburySpecial.html

The menu bar is supposed to go above the text and the red and b

Answer 1

The z-index property will only work when there is also a position property applied (not counting position: static;, which is the default).

All of the following will work, according to the spec:

position: fixed;
position: absolute;
position: relative;
position: sticky; /* Limited support, currently in Firefox and Opera */

The only exceptions are within a flex container or a CSS grid.

Answer 2

z-index applies to positioned elements.

Positioned elements are defined as elements for which the position property has a value other than static.

static is the default value.

You haven't applied a different position value to any of your elements.

You probably want position: relative;.