In today's article, you'll learn how HTML elements are stacked by . default Note, I'll NOT teach you how to change the stacking order of elements (you may use the CSS property for this purpose) but only teach you how things work "naturally". z-index I believe understanding how element stacking works by default will make it easier for you to learn how to control it, a concept I'll cover in a future article. Table of contents Important terms The default stacking order Demo Summary Conclusion Important terms : You may recall from high school math classes the , which is formed by the , and axes. In this system, if you combine two axes you create a two-dimensional . The remaining axis will always be perpendicular to the plane and form with it the 3D coordinate system. Consider the below z-axis 3D coordinate system x y, z plane image You can think of the plane (the blue layer) as the screen you're looking at right now. Since you're facing the screen (you're perpendicular to the screen) you're on the -axis. xy z Although the image only shows one layer on the plane, the plane can contain an infinite number of layers. The overlapping can be total or partial. xy overlapping : Considering the system described above in the context of a web page, is the total or partial superposition of elements. The higher the stack, the closer to the user-facing the screen. Stacking stacking : The element, which is the top-level element of any HTML document, is also known as the . Root element <html> root element : Positioned element A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.) : A descendant element is an element that is nested within another element, regardless of how deeply nested. Descendant element : An element that is a descendant of the root element and that has NOT been positioned. Descendant non-positioned element : An element that is a descendant of the root element and that has been positioned. Descendant positioned element : Keep in mind that the element is a container for the and the elements. The former is NOT visible to the user and contains metadata about your page, for instance, it links your page to external style sheets. The latter is a container for the visible portion of your page. Therefore, the descendants of the element that matters to us is the one inside the element. Note <html> <head> <body> <html> <body> The default stacking order Once you understand the terms described above, understanding the default stacking order is pretty straightforward: At the very bottom of the stack goes the element. <html> Then, its non-positioned descendant elements, in order of appearance in the source code. And finally, its positioned descendant elements, in order of appearance in the source code. Demo https://www.youtube.com/watch?v=zac8nGU2RkU&embedable=true <body>
  <div class="static1">Static #1</div>
  <div class="relative">Relative</div>
  <div class="absolute">Absolute</div>
  <div class="fixed">Fixed</div>
  <div class="sticky">Sticky</div>
  <div class="static2">Static #2</div>
</body> You can see from the demo and from the snippet above that both static elements go below the positioned elements when they overlap, even though comes last in the source code. This proves that in this imaginary positioned elements are closer to the user than non-positioned elements. Static #2 z-axis, The way the positioned elements overlap proves that they are stacked in order of appearance. What about the ? root element The next paragraph might blow your mind 🤯 I haven't set any styles to it, which makes it keep its . The white background you see comes from the light your device's screen emits. Don't believe me? See the for the . transparent background-color Formal definition background-color If you set a different to the you'll confirm that it is below its descendant elements. background-color root element Summary The first thing to consider is that, when we talk about , we're talking about a tridimensional conceptualization of pages. Elements are stacked on the z-axis, which is an imaginary axis perpendicular to the screen. stacking HTML Second, in order to understand how elements are stacked by default, i.e., without the property, we need to make a distinction between three types of elements: z-index The root element (the element) which is a container for every other element you add to your page. <html> Non-positioned elements, which have their computed value equals to . position static Positioned elements, which have their computed value equals to anything but . position static Third, stacking will only be observable in cases of overlapping between elements. Fourth, you may not have noticed, but there's no distinction between the different types of positioned elements. By that I mean that absolutely positioned elements do not have precedence over relatively positioned elements or vice-versa, for example. They have the same "weight" and the one that comes later on the source code will be on top. Conclusion Once you understand what means in the context of web pages and the different types of elements that can be stacked, understanding the default stacking order becomes crystal clear. stacking From a philosophical perspective, when you compare the section with the section you can see that learning may be more difficult, but it will make learning the easier. Important Terms default stacking order why how Finally, this article does NOT deal with the stacking of nested elements of a stacked element, nor with how to alter the stacking order, but I promise I'll cover that in a future article 🫡 This project's source code is available at this . Go ahead and give it a star! repo Did you like this article? Share it with your friends, or leave a comment or a reaction. Of course, there's nothing stopping you from doing everything 😄 If you're on HackerNoon, don't forget to if you want to get my latest articles straight to your inbox. subscribe

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story will praise and/or roast a product, company, service, game, or anything else people like to review on the Internet.

How Are HTML Elements Stacked by Default?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

What’s the Difference Between path.join() and path.resolve()?

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

What’s the Difference Between path.join() and path.resolve()?

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps