Control how divs overlap using z-index:

This page demonstrates absolute and relative div positioning AND controlling div overlap using z-index.

This div's position is fixed (does not scroll).

Use position and z-index together to get z-index to work. Using z-index without position is not recommended.

z-index: controls the layering/overlapping of divs.

Explicitly setting the z-index of a div can change its placement within in a stack of overlapping divs.

The higher the z-index, the closer to the user/audience the element is. An element having a low z-index means that elements with higher z-indexes could overlap and obscure some (or all) of the element with the lower z-index.

When creating divs and setting their position, they automatically have a z-index. If you don't explicitly set the z-index of a div, the last div created on a page is the one with the highest z-index (the first div would have the lowest).

When you explicitly set the z-index of an element, you might set 1 as the lowest setting, with other explicit settings being higher.

Understand the Box Model
z-index: 1

fixed
does not scroll

Understand the Box Model Then Think Outside of It
z-index: 3

absolute
scrolls

z-index: 2

This div's position is absolute (it scrolls).

This example is somewhat edited from the original example by professor Don Sinclair.

Just in case there is not enough text in this window, I have created this long narrow and somewhat rambling sentence that will, if all goes well, cause a scroll bar to appear at the right of the window allowing one to scroll, demonstrating the difference between fixed and absolute positioning. the inclusion of this second sentence is probably prudent just in case one is viewing this page on a monitor larger than is available in lecture. What was that again? Just in case there is not enough text in this window, I have created this long narrow and somewhat rambling sentence that will, if all goes well, cause a scroll bar to appear at the right of the window allowing one to scroll, demonstrating the difference between fixed and absolute positioning. the inclusion of this second sentence is probably prudent just in case one is viewing this page on a monitor larger than is available in lecture. Just in case there is not enough text in this window, I have created this long narrow and somewhat rambling sentence that will, if all goes well, cause a scroll bar to appear at the right of the window allowing one to scroll, demonstrating the difference between fixed and absolute positioning. the inclusion of this second sentence is probably prudent just in case one is viewing this page on a monitor larger than is available in lecture. Just in case there is not enough text in this window, I have created this long narrow and somewhat rambling sentence that will, if all goes well, cause a scroll bar to appear at the right of the window allowing one to scroll, demonstrating the difference between fixed and absolute positioning. the inclusion of this second sentence is probably prudent just in case one is viewing this page on a monitor larger than is available in lecture. Just in case there is not enough text in this window, I have created this long narrow and somewhat rambling sentence that will, if all goes well, cause a scroll bar to appear at the right of the window allowing one to scroll, demonstrating the difference between fixed and absolute positioning. the inclusion of this second sentence is probably prudent just in case one is viewing this page on a monitor larger than is available in lecture. Just in case there is not enough text in this window, I have created this long narrow and somewhat rambling sentence that will, if all goes well, cause a scroll bar to appear at the right of the window allowing one to scroll, demonstrating the difference between fixed and absolute positioning. the inclusion of this second sentence is probably prudent just in case one is viewing this page on a monitor larger than is available in lecture. Just in case there is not enough text in this window, I have created this long narrow and somewhat rambling sentence that will, if all goes well, cause a scroll bar to appear at the right of the window allowing one to scroll, demonstrating the difference between fixed and absolute positioning. the inclusion of this second sentence is probably prudent just in case one is viewing this page on a monitor larger than is available in lecture. Just in case there is not enough text in this window, I have created this long narrow and somewhat rambling sentence that will, if all goes well, cause a scroll bar to appear at the right of the window allowing one to scroll, demonstrating the difference between fixed and absolute positioning. the inclusion of this second sentence is probably prudent just in case one is viewing this page on a monitor larger than is available in lecture. Just in case there is not enough text in this window, I have created this long narrow and somewhat rambling sentence that will, if all goes well, cause a scroll bar to appear at the right of the window allowing one to scroll, demonstrating the difference between fixed and absolute positioning. the inclusion of this second sentence is probably prudent just in case one is viewing this page on a monitor larger than is available in lecture.