Natural Stacking Order of elements in web pages- Z index property
From lowest to highest:
- Root Element.
- Block Level Elements in normal page flow.
- Float elements not positioned.
- Inline descendant elements in normal page flow.
- Positioned elements.
Using z-index property in CSS can change that order.
Web page elements are displayed in the browser in three dimensions. They have an x, y, and z-axis. The z-axis is in and out of the screen. This means that elements stack on top of each other depending on where they are in the html content.
Note: You should not have to use this very often. You may just need to move your element up or down in the html code to change its stack order.