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 black gallery menu on the right should go over the menu bar and text.

I've set the z-index for the right column (in which the text sits) and the menu bar to 1, and the z-index of the red and black gallery menu to -1. But the divs still still next to each other, rather than on top of each other as they're supposed to.

The relative css is here:

#menu {
    width: 100%;
    float: left;
    border-top: 5px solid #823
    z-index: 1;
}
#columns .right {
    float: right;
    width: 28%;
    height: 90%;
    overflow-y: auto;
    padding-right: 3%;
    padding-left: 1%;
    padding-top: 1%;
    text-align: justify;
    z-index: 1;
}
#menubar {
    float: right;
    width: 18%;
    padding-right: 3%;
    padding-left: 1%;
    z-index: -1;
}

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;.