Z-index

Objects on webpages can have three dimensions, y and x, and z. Dimension z gives websites a sense of depth by layering objects. With the addition of the z-index property in CSS2, divs and other elements can be layered on top of each other. The z-index property specifies the layer number of an element. Items on web pages are ordered with low z-indices in the back, and higher z-indices in the front.

In order for z-index to work properly, the element to which it is applied must also have a defined position, position: absolute, position: relative, or position: fixed (simply a position other than static). By default, z-index is determined by order in the code, i.e. elements later in the code appear on top of elements earlier in the code.

The z-index property has 4 possibilities for a value:

Syntax:
z-index: auto|number|initial|inherit;

position: fixed; is a property that fixes an HTML element in a certain location in a window. As the user scrolls, the element remains in the same position in the window. This is commonly used

To create a fixed navbar, follow the instructions below:

  1. Create navbar in HTML

  2. Use the name of the navbar (in this example it will be fixed-navbar) to create a CSS rule

  3. Create a rule for position, i.e. position: fixed;

  4. Create a z-index for it, i.e. z-index: 100;

  5. As long as you don’t create a stacking order, you have just created a fixed navbar using z-index. An example of the CSS that could be used is below.

    .fixed-navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      width: 100%;
      height: 25px;
      background-color: red;
    }

Example:

For more information see: