Internet, Networking, & Security Web Development How to Use Z-Index in CSS Positioning overlapping elements with cascading style sheets By Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated March 09, 2020 axllll / iStock Vectors / Getty Images Web Development CSS & HTML Web Design SQL Tweet Share Email One of the challenges when using CSS positioning for web page layout is that some of your elements may overlap others. This works fine if you want the last element in the HTML to be on top, but what if you do not or what if you want to have elements that currently do not overlap others to do so because the design calls for this "layered" look? In order to change the way elements overlap you need to use the z-index property of CSS. If you’ve used graphics tools in Word and PowerPoint or a more robust image editor like Adobe Photoshop, then chances are you’ve seen something like z-index in action. In these programs, you can highlight the object(s) that you’ve drawn, and choose an option to Send to back or Bring to front certain elements of your document. In Photoshop, you do not have these functions, but you do have the "Layer" pane of the program and you can arrange where an element falls on the canvas by rearranging these layers. In both of these examples, you are essentially setting the z-index of those objects. What Is Z-Index? When you’re using CSS positioning to position elements on the page, you need to think in three dimensions. There are two standard dimensions: left/right and top/bottom. The left to right index is known as the x-index, while the top to bottom one is the y-index. This is how you would position elements horizontally or vertically, using these two indexes. When it comes to web design, there is also the stacking order of the page. Each element on the page can be layered above or below any other element. The z-index property determines where in the stack each element is. If x-index and y-index are the horizontal and vertical lines, then z-index is the depth of the page, essentially the 3rd dimension. Think of the elements on a web page as pieces of paper and the web page itself as a collage. Where you lay the paper is determined by positioning, and how much of it is covered by the other elements is the z-index. The z-index is a number, either positive (e.g. 100) or negative (e.g. -100).The default z-index is 0. The element with the highest z-index is on top, followed by the next highest and so on down to the lowest z-index. If two elements have the same z-index value (or it’s not defined, meaning the use the default value of 0) the browser will layer them in the order they appear in the HTML. How to Use Z-Index Give each element you want in your stack a different z-index value. For example, if you have five different elements: element A — z-index of -25element B — z-index of 82element C — z-index not setelement D — z-index of 10element E — z-index of -3 They will stack in the following order: element Belement Delement Celement Eelement A It's recommended to use vastly different z-index values to stack your elements. That way, if you add more elements to the page later, you have room to layer them in without having to adjust the z-index values of all the other elements. For example: 100 for your top-most element0 for your middle element-100 for your bottom element You can also give two elements the same z-index value. If these elements are stacked, they will display in the order they are written in the HTML, with the last element on top. For an element to effectively use the z-index property, it must be a block-level element or use a display of "block" or "inline-block" in your CSS file.