por The positioning of elements in CSS is a fundamental part when designing your website. Placing each HTML element where it belongs is not only a matter of aesthetics, but also Good positioning also improves the user experience and determines the usefulness of the elements. In this post, for this reason, we present the property z-index in CSS, a key variable to determine the order of elements in the depth of your web page.
Positioning elements in CSS
Element positioning in CSS is not a common topic of discussion, because Browsers have an automatic way of reading our code and positioning elements on the screen. However, there are several ways to override this automatic system and position our HTML elements at will.
Within CSS, you can use the property position to place your HTML elements. At we call this method «classic positioning», as it uses the basic properties of the program. We invite you to read our post on classic positioning to understand how to use it when structuring your website. CSS also allows us to use other methodologies such as FlexBox or CSSGrid. All of these options allow us to modify the automatic location that the browser gives to our HTML elements.
Note that the browser system will automatically locate elements in two situations: if there is no certain value for the property position (if this is not present) or if the programmer has determined the value static. The value static o static value is the default value of the property position. This value means that the element does not have a specific positioning and that the browser will use its automatic system to locate it.
Whatever method you use to position your elements on the screen, whenever there is a value different from static on the property position, you can use the property z-index in CSS to determine the order of elements and their descendants.
What does the z-index property do in CSS?
The property z-index in CSS determines the order of the positioned elements on a web page. A positioned element is one that has a different value than static on your property position. As its name indicates, the property z-index in CSS determines the order of examples on the z axis. While the left and right determine the location of elements on the x-axis, and the properties top and bottom determine its location on the y axis, the property z-index determines its location in relation to the layers of the web page.
The property z-index In CSS it defines the order of the elements on the z axis according to the number that the programmer gives to each one. This means that we can sort overlapping elements on a web page by assigning them a numerical value in their z-index. Elements with higher values will cover those with lower values. If we want to ensure that an element is on top of all the others, we’ll give it a high value like 99. Likewise, if we want an element to always stay behind, like a background image, we’ll give it a low value, like 1, or even a negative value.
This property can also have a keyword as a value. By writing «z-index: auto», we will be telling the browser that we have not established a new order for the overlapping elements. This means that the browser will use the order of our code to determine what will be seen in the first layer.
Give it the value car to the property z-index in CSS it is like giving it a value 0. If we use automatic mode or if we give it the same value z-index to two elements, we will see in the first layer the element that is last in our code. This happens because The browser paints the elements following the top-to-bottom order of our code. When reading two elements with the same z-indexthe browser will sort them as if they were on the same layer, but it will paint over the last one it read.
We recommend you go to the official page of the Mozilla Developer Network to see in person the effects of modifying a z-index. We also invite you to review this exercise from the w3schools website, in which you can play with the number z-index from the red box and even see the result when you give it the value car.
Do you dare to continue learning?
At we know that, with every new piece of information you learn about CSS and HTML, your desire to continue learning about these important web programming languages grows. Now that you know how the z-index property works in CSS and how to use it to order HTML elements on a website, It’s time for you to create and design your own website with aesthetics and utility!
For this reason, we recommend our intensive bootcamp Full Stack Web Development Bootcamp. In it you will learn, among many other things, how to use HTML and CSS to create accessible, unique and useful web pages. In the end, you will present your own website, which you will create with this knowledge. What are you waiting for to fulfill your dream of being a professional web developer? Don’t hesitate to ask for more information and sign up now!