CSS Layout – Understanding the z-index Property

Contents

CSS Layout: z-index Property

Learn about the z-index property in CSS and how it controls the stacking order of elements on a web page.

Discover its importance in creating layered layouts, handling overlapping content, and designing popups and modals.

Get examples, code snippets, and best practices.

The z-index property in CSS is used to control the stacking order of elements on a web page.

It determines which elements appear in front or behind other elements, allowing you to create layered layouts.

The z-index property accepts an integer value, and elements with higher z-index values are positioned in front of elements with lower values.

If two elements have the same z-index, the one that appears later in the HTML document will be displayed on top.

How to Use the z-index property?

Here’s an example of how to use the z-index property

.box1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
  z-index: 2;
}
.box2 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: blue;
  z-index: 1;
}
.box3 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: green;
}

Explanation:

1-In this example, box1 has a higher z-index value of 2, so it will appear on top of box2 and box3. box2 has a z-index of 1 and will appear behind box1 but in front of box3. box3 doesn’t have a specified z-index, so it will be rendered below the other two boxes.

2-It’s important to note that the z-index property only works on positioned elements (elements with a position value of absolute, relative, or fixed).

3-By default, all elements have a z-index of auto, and their stacking order is determined by the order they appear in the HTML document.

4-Additionally, the z-index property applies within the stacking context of an element. If an element is contained within another element with a different z-index, the child element’s z-index will only affect its stacking order within the parent.

complete code in html

Here’s a complete HTML code example that demonstrates the usage of the z-index property:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box1 {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: red;
      z-index: 2;
    }
    .box2 {
      position: absolute;
      width: 300px;
      height: 300px;
      background-color: blue;
      z-index: 1;
    }
    .box3 {
      position: absolute;
      width: 400px;
      height: 400px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>
</html>

Explanation:

1-In this example, we have three div elements with different classes: box1, box2, and box3.

2-Each box has a different background color and is positioned absolutely.

3-The z-index property is used to control their stacking order.

4-When you open this HTML file in a browser, you will see three stacked boxes. box1 (red) will appear on top, box2 (blue) will be behind box1, and box3 (green) will be rendered below the other two boxes.

5-The stacking order is determined by the z-index values assigned to each box.

How to use The z-index Property in CSS?

Here’s a complete HTML code example that demonstrates the usage of the z-index property:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box-container {
      position: relative;
      width: 450px;
      height: 450px;
      border: 5px solid yellow;
      background-color: pink;
    }
    .box {
      position: absolute;
     
      width: 350px;
      height: 350px;
      border: 2px solid black;
    }
    .box1 {
      background-color:red;
      width: 200px;
      height: 200px;
      z-index: 2;
    }
    .box2 {
      background-color: blue;
      width: 300px;
      height: 300px;
      z-index: 1;
    }
    .box3 {
      background-color: green;
      width: 400px;
      height: 400px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div class="box-container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
  </div>
</body>
</html>

Explanation:

1-In this example, we have a container div element with the class box-container that is used to position the child div elements.

2-Each child div has the class box along with a specific color class (box1, box2, box3) and the z-index property to control the stacking order.

3-When you open this HTML file in a browser, you will see three stacked boxes inside the container.

4-box1 (red) will appear on top, box2 (blue) will be behind box1, and box3 (green) will be rendered below the other two boxes.

5-The stacking order is determined by the z-index values assigned to each box.

Uses and importance of The z-index Property

The z-index property in CSS is a powerful tool for controlling the stacking order of elements on a web page.

Here are some of its uses and importance:

Layering Elements:

The z-index property allows you to layer elements on top of each other, creating a visual hierarchy.

You can control which elements appear in front and which ones appear behind others, providing a way to design complex layouts.

Here’s a complete HTML code example that demonstrates the use of the z-index property to layer elements on a web page:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      position: absolute;
      width: 300px;
      height: 300px;
      border: 1px solid black;
      
    }
    .box1 {
      background-color: red;
      width: 100px;
      height: 100px;
      z-index: 2;
    }
    .box2 {
      background-color: blue;
      z-index: 1;
      width: 200px;
      height: 200px;
    }
    .box3 {
      background-color: green;
      width: 250px;
      height: 250px;
    }
  </style>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</body>
</html>

Explanation:

1-In this example, we have three div elements with the class box: box1, box2, and box3.

2-Each box has a specific background color and is positioned absolutely.

3-The z-index property is used to control their stacking order.

4-When you open this HTML file in a browser, you will see three stacked boxes.

5-box1 (red) will appear on top, box2 (blue) will be behind box1, and box3 (green) will be rendered below the other two boxes.

6-The stacking order is determined by the z-index values assigned to each box.

Try to adjust the z-index values or add more boxes to experiment and see how the stacking order changes.

Overlapping Content:

When you have elements that overlap, such as dropdown menus, tooltips, or modal windows, the z-index property helps you control which element is displayed on top of the others.

This ensures that important content is not obscured by other elements

Here’s a complete HTML code example that demonstrates the use of the z-index property to handle overlapping content:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 400px;
    }
    .box {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }
    .box1 {
      background-color: red;
      z-index: 2;
    }
    .box2 {
      background-color: blue;
      z-index: 1;
    }
    .box3 {
      background-color: green;
    }
    .overlapping {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 200px;
      height: 200px;
      background-color: yellow;
      z-index: 3;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="overlapping"></div>
  </div>
</body>
</html>

Explanation:

1-In this example, we have a container div element with the class container that is used to position the child div elements.

2-We have three colored boxes (box1, box2, box3) and an additional div with the class overlapping, which represents overlapping content.

3-The z-index property is used to control the stacking order of these elements.

4-The yellow box with the class overlapping has a higher z-index value of 3, which positions it on top of the other boxes.

5-As a result, the yellow box will appear above the other colored boxes, even though it’s positioned in the same area.

6-When you open this HTML file in a browser, you will see the three colored boxes with the yellow box overlapping them.

7-The yellow box will be rendered on top due to its higher z-index value, ensuring that it does not get obscured by the other boxes.

Try to adjust the z-index values or modify the positions to experiment with different overlapping scenarios.

Designing Popups and Modals:

z-index is commonly used in creating popups, modals, and overlays. By giving a higher z-index value to a modal element, you can ensure it appears above other page content, creating a focused and prominent visual effect.

Here’s a complete HTML code example that demonstrates the use of the z-index property to design popups and modals:

<!DOCTYPE html>
<html>
<head>
  <style>
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal {
      position: relative;
      width: 400px;
      height: 200px;
      background-color: white;
      border: 1px solid black;
      z-index: 3;
    }
  </style>
</head>
<body>
  <h1>Popup Modal Example</h1>
  <div class="overlay">
    <div class="modal">
      <h2>Modal Title</h2>
      <p>This is the content of the modal.</p>
      <button>Close</button>
    </div>
  </div>
  <p>Content behind the modal.</p>
</body>
</html>

Explanation:

1-In this example, we have an overlay div element with the class overlay.

2-This element covers the entire viewport using fixed positioning and a semi-transparent background color.

3-It serves as the backdrop for the modal.

4-Inside the overlay, we have a modal div element with the class modal. 5-The modal is positioned relative to the overlay and has a specific width, height, and background color.

6-The z-index property is set to a higher value than the overlay, ensuring that the modal appears on top of the overlay.

7-When you open this HTML file in a browser, you will see a modal overlay with a title, content, and a close button.

8-The modal is centered on the screen and the overlay darkens the background content to draw attention to the modal.

Try to customize the content, styles, and dimensions of the modal to fit your specific needs. You can also add JavaScript functionality to open and close the modal using event listeners or CSS classes.

How to create Navigation menus and dropdown menu by using CSS?

Navigation Menus:

z-index is often used in navigation menus, especially dropdown menus, to ensure that the dropdown appears above the rest of the content.

This way, the dropdown menu does not get hidden behind other elements on the page.

Here’s a complete HTML code example that demonstrates the use of the z-index property in navigation menus:

<!DOCTYPE html>
<html>
<head>
  <style>
    .navbar {
      position: relative;
      background-color: #333;
      height: 50px;
      z-index: 2;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      position: absolute;
      top: 50px;
      left: 0;
      background-color: #f9f9f9;
      min-width: 200px;
      display: none;
      z-index: 3;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
    .menu-item {
      padding: 10px;
      color: #000;
      text-decoration: none;
      display: block;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="dropdown">
      <a class="menu-item" href="#">Dropdown</a>
      <div class="dropdown-content">
        <a class="menu-item" href="#">Item 1</a>
        <a class="menu-item" href="#">Item 2</a>
        <a class="menu-item" href="#">Item 3</a>
      </div>
    </div>
    <a class="menu-item" href="#">Home</a>
    <a class="menu-item" href="#">About</a>
    <a class="menu-item" href="#">Contact</a>
  </nav>

  <h1>Main Content</h1>
  <p>This is the main content of the page.</p>
</body>
</html>

Explanation:

1-In this example, we have a navigation menu represented by the <nav> element with the class navbar.

2-The dropdown menu is created using the <div> element with the class dropdown.

3-The dropdown content is contained within a <div> element with the class dropdown-content.

4-The z-index property is used to control the stacking order of the dropdown menu.

5-The .navbar class has a z-index of 2 to ensure it appears above other content on the page.

6-The .dropdown-content class has a higher z-index of 3 to make it appear above the navbar.

7-When you open this HTML file in a browser, you will see a navigation menu with a dropdown.

8-When you hover over the “Dropdown” menu item, the dropdown content will appear below it.

9-The dropdown content overlays any other content on the page due to its higher z-index value.

Try to modify the menu items, add more dropdowns, or customize the styles to fit your specific requirements.

How to use the z-index property for Overriding Default Stacking Order of elements?

Overriding Default Stacking Order:

The default stacking order of elements in HTML is determined by their order in the HTML markup.

However, using the z-index property, you can override this default order and control how elements should be stacked relative to each other, regardless of their position in the HTML structure.

Here’s a complete HTML code example that demonstrates overriding the default stacking order using the z-index property:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      margin-bottom: 10px;
    }

    .box1 {
      background-color: red;
      z-index: 3;
    }

    .box2 {
      background-color: blue;
      z-index: 2;
    }

    .box3 {
      background-color: green;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</body>
</html>

Explanation:

1-In this example, we have three div elements with the class box: box1, box2, and box3.

2-Each box has a specific background color and a z-index value assigned to it.

3-By default, elements are stacked in the order they appear in the HTML document.

4-However, in this example, we override the default stacking order by assigning different z-index values to the boxes.

5-box1 has the highest z-index of 3, followed by box2 with a z-index of 2, and box3 with a z-index of 1.

6-When you open this HTML file in a browser, you will see the three boxes rendered on the page.

7-However, their stacking order will be determined by the z-index values. box1 (red) will be displayed on top, box2 (blue) will be in the middle, and box3 (green) will be rendered at the bottom.

Try to adjust the z-index values or add more boxes to experiment and see how the stacking order changes based on the assigned z-index values.

Layering Backgrounds:

By applying z-index to background elements, such as background images or background colors, you can control their stacking order relative to other content on the page.

This allows for more creative and visually appealing designs.

Here’s a complete HTML code example that demonstrates layering backgrounds using the z-index property:

<!DOCTYPE html>
<html>
<head>
  <style>
    .background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('background1.jpg');
      background-size: cover;
      z-index: -1;
    }

    .content {
      position: relative;
      z-index: 1;
      text-align: center;
      padding-top: 100px;
      font-size: 24px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="background"></div>
  <div class="content">
    <h1>Welcome to My Website</h1>
    <p>Enjoy the content and explore!</p>
  </div>
</body>
</html>

Explanation:

1-In this example, we have a background image set using the background-image property in the .background class.

2-The background is positioned fixed to cover the entire viewport (width: 100%; height: 100%;).

3-The z-index is set to -1, placing it behind the content.

4-The content is contained within the .content class, which has a positive z-index of 1.

5-This ensures that the content appears in front of the background. In this case, we have a simple heading and paragraph styled with CSS.

6-When you open this HTML file in a browser, you will see the background image covering the entire viewport.

7-The content is layered on top of the background, making it readable and visually appealing.

Try to modify the background image URL, adjust the content styles, or add additional layers of background or content to suit your design needs.

Quiz with answers about this lesson

Sure! Here’s a multiple-choice quiz about the concepts covered in this lesson on the z-index property:

1-What does the z-index property control?

a) The font size of an element.

b) The stacking order of elements.

c) The width and height of an element.

d) The color of an element.

2-Which CSS position value is required for the z-index property to take effect?

a) static

b) relative

c) absolute

d) fixed

3-If two elements have the same z-index value, which one will appear on top?

a) The first element in the HTML document.

b) The second element in the HTML document.

c) The order doesn’t matter; they will overlap.

d) The browser will randomly choose.

4-Which property can be used to override the default stacking order of elements?

a) z-index

b) position

c) display

d) float

5-What is the default value of z-index for elements?

a) 0

b) 1

c) auto

d) none

Answers:

b) The stacking order of elements.
c) absolute
a) The first element in the HTML document.
a) z-index
c) auto

6-Which CSS property is used to specify the stacking context for an element?

a) z-order

b) stacking-context

c) z-index

d) position

7-What happens if an element has a negative z-index value?

a) It will be hidden from the page.

b) It will be pushed to the bottom of the stacking order.

c) It will have no effect on the stacking order.

d) It will overlap other elements with positive z-index values.

8-When should you use the z-index property?

a) Only when creating dropdown menus.

b) Only when working with background images.

c) Only when you want to change the order of elements in the HTML document.

d) When you want to control the stacking order of elements on a web page.

9-What is the maximum value that z-index can have?

a) 999

b) 9999

c) 99999

d) There is no maximum value.

10-How can you layer an element on top of all other elements on the page?

a) Set z-index: 0 on the element.

b) Set z-index: -1 on the element.

c) Set z-index: 1 on the element.

d) Set z-index: auto on the element.

Answers:

c) z-index
b) It will be pushed to the bottom of the stacking order.
d) When you want to control the stacking order of elements on a web page.
d) There is no maximum value.
c) Set z-index: 1 on the element.

11-Which property determines the order of elements when the z-index values are the same?

a) position
b) display
c) float
d) order

12-What happens if an element’s z-index value is set to a decimal number?

a) The browser will round the value to the nearest integer.

b) The element will be hidden from the page.

c) The z-index property will not take effect.

d) It will cause a syntax error in the CSS.

13-How many stacking contexts can exist on a web page?

a) Only one stacking context can exist.

b) There can be multiple stacking contexts.

c) It depends on the browser.

d) It depends on the CSS specification version.

14-What happens if two elements have the same z-index value and they are siblings within the same stacking context?

a) The element declared first in the HTML appears on top.

b) The element declared last in the HTML appears on top.

c) They will overlap, and the order doesn’t matter.

d) The z-index property will not work for siblings.

15-Which CSS property can be used to remove an element from the normal document flow and establish a new stacking context?

a) z-index

b) position

c) display

d) float

Answers:

a) position
a) The browser will round the value to the nearest integer.
b) There can be multiple stacking contexts.
a) The element declared first in the HTML appears on top.
b) position

16-What is the lowest possible value for the z-index property?

a) -1

b) 0

c) 1

d) There is no lowest possible value.

17-Which CSS property is commonly used with z-index to position an element vertically?

a) margin

b) padding

c) top

d) left

18-Can the z-index property be applied to inline elements?

a) Yes, it works the same for both block and inline elements.

b) No, z-index can only be applied to block-level elements.

c) It depends on the specific browser being used.

d) It depends on the position property of the inline element.

19-What is the purpose of using z-index in the stacking order of elements?

a) To control the visibility of elements.

b) To determine the size of elements.

c) To specify the order in which elements are rendered.

d) To change the color of elements.

20-Which element property does the z-index value not affect?

a) Visibility

b) Positioning

c) Size

d) Color

Answers:

a) -1
c) top
a) Yes, it works the same for both block and inline elements.
c) To specify the order in which elements are rendered.
d) Color

Application

Here’s a complete HTML code example that applies the concepts covered in this lesson on the z-index property to create a layered layout:

<!DOCTYPE html>
<html>
<head>
  <style>
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: #333;
      z-index: 2;
    }
    .sidebar {
      position: fixed;
      top: 50px;
      left: 0;
      width: 200px;
      height: calc(100% - 50px);
      background-color: #777;
      z-index: 1;
    }
    .content {
      margin-top: 50px;
      margin-left: 200px;
      padding: 20px;
      z-index: 0;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>My Website</h1>
  </div>
  <div class="sidebar">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
  <div class="content">
    <h2>Welcome to My Website!</h2>
    <p>This is the main content of the page.</p>
  </div>
</body>
</html>

Explanation:

1-In this example, we have a simple layout with a header, sidebar, and content section.

2-The z-index property is used to layer these elements and control their stacking order.

3-The header has a z-index of 2, making it appear on top of other elements.

4-The sidebar has a z-index of 1, positioning it below the header.

5-The content section has a z-index of 0, placing it behind both the header and sidebar.

6-When you open this HTML file in a browser, you will see the layered layout.

7-The header will appear at the top, followed by the sidebar on the left, and the content section will be positioned to the right of the sidebar.

8-Try to customize the styles, add more content, or modify the dimensions to suit your specific layout needs.

CSS Tutorial

Curriculum

CSS Layout – Understanding the z-index Property

CSS Layout: z-index Property

How to Use the z-index property?

How to use The z-index Property in CSS?

Uses and importance of The z-index Property

Layering Elements:

Overlapping Content:

Designing Popups and Modals:

How to create Navigation menus and dropdown menu by using CSS?

Navigation Menus:

How to use the z-index property for Overriding Default Stacking Order of elements?

Overriding Default Stacking Order:

Layering Backgrounds:

Quiz with answers about this lesson

Application

Leave a Reply

Modal title