Background Formatting with CSS
The first <div> in the sequence of four is given a light yellow background and some basic dimensions and properties that also apply to the other <div> elements. Then, by using the adjacent sibling selector, I select the subsequent <div> elements and provide those with different backgrounds and a decrementing z-index value. This results in the <div> with a light yellow background being displayed on top, followed by the <div> with the light blue background, followed by the <div> with the light green background, and finally the <div> with a pink background is shown at the back of the stack. This example demonstrates that the highest z-index value appears highest on the z-axis, or if you envision an invisible line perpendicular to the computer screen, the highest z-index appears furthest toward the user on that invisible line. If I omit the z-index property from the example shown in the previous post, the value of the z-index property becomes auto, and the stack along the z-axis is determined by the document flow.
For instance, the first element with positioning applied appears on the bottom of the stack, and each subsequent element appears one higher. The last element in the document with positioning receives the highest z-index value. Omitting the z-index value is demonstrated in the next post.