Natural Stacking Order

Natural Stacking Order of elements in web pages- Z index property

From lowest to highest:

  1.  Root Element.
  2. Viewport.
  3. Block Level Elements in normal page flow.
  4. Float elements not positioned.
  5. Inline descendant elements in normal page flow.
  6. 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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s