When you start positioning elements in an inflexible way, like by using absolute, relative, or fixed positioning, you may need to also control the stacking order of elements.

Stacking elements also comes up with modern ways of setting layouts. It's a less legacy concept than floats or positioning, so pay attention! You may actually need this.

Consider when you're using PowerPoint, Keynote, Sketch or other software that allows you to "Send to back", "Send to back", "Forward", etc, in order to make something appear in front of or behind something else:

If you're working with a layout that was set in a legacy way, you may end up with overlapping elements. You saw elements that were accidentally overlapped in the positioning chapter, but you may want to do this on purpose too!

The CSS property z-index will allow you to stack overlapping elements in the order of your choice. Simply give it a numerical value. The numbers you give will determine the stacking order. If you give one element a z-index of 1 and another a z-index of 2, the second element will appear in front of the first (the higher the value, the more "forward" it will be).

Let's take an example of three simple square cards. Right now, they appear in the same order as they appear in the HTML: from 1 to 3, where 3 is the last one (and therefore appears on top). This is the default behavior with no custom z-index value applied:

HTML

1
2
3

CSS

{
    font-family: Futura;
    color: white;
    font-size: 1.2em;
    text-align: center;
}

# card1, 
# card2, 
# card3 {
    width: 200px;
    height: 200px;
}

# card1 {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: 
# 9bccdd;
}

# card2 {
    position: absolute;
    top: 60px;
    left: 60px;
    background-color: 
# 58badd;
}

# card3 {
    position: absolute;
    top: 100px;
    left: 100px;
    background-color: 
# 00a1e0;
}

In order to make card number 1 appear above the others, you can assign each card a z-index, where card 1's z-index is the highest. We'll set:

• card 1's z-index to 3
• card 2's z-index to 2
• card 3's z-index to 1

# card1 {
  z-index: 3;
}

# card2 {
  z-index: 2;
}

# card3 {
  z-index: 1;
}

In reality, you could even set these silly values:

• card 1's z-index to 5000
• card 2's z-index to 342
• card 3's z-index to 6

The result would be the same. All that matters is how the numbers relate to one another; they don't actually have to be in order, although that does keep your code logical and easier to read!

In frontend development, stacking is the concept of ordering HTML elements in priority order based on their values in an imaginary z-axis. The stacking order is often influenced by the value of some CSS properties such as

... ...

4,

... ...

5,

... ...

6, and others.

In this tutorial, we’ll demonstrate some best practices for using the stacking technique to build stunning UIs in HTML.

Prerequisites

To follow along with this tutorial, you’ll need:

• A basic understanding of web development
• Familiarity with CSS and HTML
• A web browser installed in your system, e.g., Chrome
• A code editor installed on your development machine, e.g., VS Code

Before we really get going, let’s consider two scenarios:

1. You want to create two overlapping elements. To do that, you’d simply set the ... ... 4 of the first element to ... ... 8 and the latter to the absolute, right?
2. Let’s say you want to add a sticky ... ... 9 to your webpage. For this, you’d simply set its ... ... 5 to a value higher than all other elements.

Between these two scenarios lies the power of stacking in CSS. With this clue in mind, let’s dive deeper and explore how to build both simple and complex overlapping UIs using the CSS stacking technique.

Stacking with the CSS

... ...

4 property

In this section, we’ll build three overlapping divs with HTML and CSS using the

... ...

4 property.

To begin, create a new folder named

  
Div 1
  
Div 2
  
Div 3

3 in your work directory. Navigate into the folder and create two files:

  
Div 1
  
Div 2
  
Div 3

4 and

  
Div 1
  
Div 2
  
Div 3

5.

Next, open up

  
Div 1
  
Div 2
  
Div 3

4 in your code editor and add the code below:

Next, let’s link the

  
Div 1
  
Div 2
  
Div 3

7 to the

  
Div 1
  
Div 2
  
Div 3

4. Add the code below within the

  
Div 1
  
Div 2
  
Div 3

9 section of the HTML file:

... ...

Now let’s begin building the HTML elements. Add the code below to the

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

0 tag to create the three divs:

  
Div 1
  
Div 2
  
Div 3

Here, we created a wrapper to hold the three divs with class names

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

1,

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

2, and

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

3.

Next, open

  
Div 1
  
Div 2
  
Div 3

5, add the code below to override the browser’s default

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

5 and

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

6:

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

Here we use the

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

7 keyword to set all default

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

6 and

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

5 to

... .rectangle_wrapper { height: 50px; width: 200px; position: relative; } .rectangle1, .rectangle2, .rectangle3 { position: absolute; width: 100%; height: 100%; border-radius: 10px; } .rectangle1 { top: 20px; background:

6b9080;

} .rectangle2 { top: 30px; background:

eaf4f4;

} .rectangle3 { top: 40px; background:

cce3de;

}

0. We then use the

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

0 keyword to set the

... .rectangle_wrapper { height: 50px; width: 200px; position: relative; } .rectangle1, .rectangle2, .rectangle3 { position: absolute; width: 100%; height: 100%; border-radius: 10px; } .rectangle1 { top: 20px; background:

6b9080;

} .rectangle2 { top: 30px; background:

eaf4f4;

} .rectangle3 { top: 40px; background:

cce3de;

}

2 of the webpage to

... .rectangle_wrapper { height: 50px; width: 200px; position: relative; } .rectangle1, .rectangle2, .rectangle3 { position: absolute; width: 100%; height: 100%; border-radius: 10px; } .rectangle1 { top: 20px; background:

6b9080;

} .rectangle2 { top: 30px; background:

eaf4f4;

} .rectangle3 { top: 40px; background:

cce3de;

}

3 to ensure all elements within the browser viewport do not overflow to the extreme.

Next, add the CSS below to

  
Div 1
  
Div 2
  
Div 3

5 to style the divs:

... .rectangle_wrapper { height: 50px; width: 200px; position: relative; } .rectangle1, .rectangle2, .rectangle3 { position: absolute; width: 100%; height: 100%; border-radius: 10px; } .rectangle1 { top: 20px; background:

6b9080;

} .rectangle2 { top: 30px; background:

eaf4f4;

} .rectangle3 { top: 40px; background:

cce3de;

}

Now, if you open up

  
Div 1
  
Div 2
  
Div 3

4 in your browser, the webpage should look like the screenshot below:

Now you know how to stack multiple elements in HTML using the CSS

... ...

4 property.

This example was made possible because we added

... .rectangle_wrapper { height: 50px; width: 200px; position: relative; } .rectangle1, .rectangle2, .rectangle3 { position: absolute; width: 100%; height: 100%; border-radius: 10px; } .rectangle1 { top: 20px; background:

6b9080;

} .rectangle2 { top: 30px; background:

eaf4f4;

} .rectangle3 { top: 40px; background:

cce3de;

}

7 to our parent element. Whenever an element is set to a

... .rectangle_wrapper { height: 50px; width: 200px; position: relative; } .rectangle1, .rectangle2, .rectangle3 { position: absolute; width: 100%; height: 100%; border-radius: 10px; } .rectangle1 { top: 20px; background:

6b9080;

} .rectangle2 { top: 30px; background:

eaf4f4;

} .rectangle3 { top: 40px; background:

cce3de;

}

7, every other element within that div with

... .rectangle_wrapper { height: 50px; width: 200px; position: relative; } .rectangle1, .rectangle2, .rectangle3 { position: absolute; width: 100%; height: 100%; border-radius: 10px; } .rectangle1 { top: 20px; background:

6b9080;

} .rectangle2 { top: 30px; background:

eaf4f4;

} .rectangle3 { top: 40px; background:

cce3de;

}

9 will be placed absolutely relative to that unit.

This is an old concept of stacking elements, but it works consistently well across all browsers, so it is highly recommended.

Stacking with CSS grid

CSS grid is a common method of stacking elements in modern-day web development. It allows for easy placement of elements in a webpage with minimal code using a grid layout. In this section, we’ll demonstrate how to stack elements using a CSS grid by enhancing the elements we created in the previous section.

Once again, navigate into the

  
Div 1
  
Div 2
  
Div 3

3 folder you created in the previous section. Make a copy of both the HTML and CSS files, and remove all CSS except the

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

7 and

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

0 keyword.

Now let’s add the code below to

  
Div 1
  
Div 2
  
Div 3

5:

.rectangle_wrapper{

height: 100%;
display: grid;
grid-template-columns: repeat(1fr, 3);
grid-template-areas: "rec1 rec2 rec3";
border: 3px dotted brown;
padding: 20px;
margin: 30px;

width: 100%;
grid-area: rec1 ;
background: 

width: 100%;    
grid-area: rec2 ;
background: 

width: 100%;
grid-area: rec3 ;
background: 

First, we set the

.rectangle_wrapper{

height: 100%;
display: grid;
grid-template-columns: repeat(1fr, 3);
grid-template-areas: "rec1 rec2 rec3";
border: 3px dotted brown;
padding: 20px;
margin: 30px;

width: 100%;
grid-area: rec1 ;
background: 

width: 100%;    
grid-area: rec2 ;
background: 

width: 100%;
grid-area: rec3 ;
background: 

4 class to

.rectangle_wrapper{

height: 100%;
display: grid;
grid-template-columns: repeat(1fr, 3);
grid-template-areas: "rec1 rec2 rec3";
border: 3px dotted brown;
padding: 20px;
margin: 30px;

width: 100%;
grid-area: rec1 ;
background: 

width: 100%;    
grid-area: rec2 ;
background: 

width: 100%;
grid-area: rec3 ;
background: 

5. We then set the

.rectangle_wrapper{

height: 100%;
display: grid;
grid-template-columns: repeat(1fr, 3);
grid-template-areas: "rec1 rec2 rec3";
border: 3px dotted brown;
padding: 20px;
margin: 30px;

width: 100%;
grid-area: rec1 ;
background: 

width: 100%;    
grid-area: rec2 ;
background: 

width: 100%;
grid-area: rec3 ;
background: 

6 to

.rectangle_wrapper{

height: 100%;
display: grid;
grid-template-columns: repeat(1fr, 3);
grid-template-areas: "rec1 rec2 rec3";
border: 3px dotted brown;
padding: 20px;
margin: 30px;

width: 100%;
grid-area: rec1 ;
background: 

width: 100%;    
grid-area: rec2 ;
background: 

width: 100%;
grid-area: rec3 ;
background: 

7, which repeats one fragment in three columns. Next, we defined the grid columns (

.rectangle_wrapper{

height: 100%;
display: grid;
grid-template-columns: repeat(1fr, 3);
grid-template-areas: "rec1 rec2 rec3";
border: 3px dotted brown;
padding: 20px;
margin: 30px;

width: 100%;
grid-area: rec1 ;
background: 

width: 100%;    
grid-area: rec2 ;
background: 

width: 100%;
grid-area: rec3 ;
background: 

8. with

.rectangle_wrapper{

height: 100%;
display: grid;
grid-template-columns: repeat(1fr, 3);
grid-template-areas: "rec1 rec2 rec3";
border: 3px dotted brown;
padding: 20px;
margin: 30px;

width: 100%;
grid-area: rec1 ;
background: 

width: 100%;    
grid-area: rec2 ;
background: 

width: 100%;
grid-area: rec3 ;
background: 

9, then set each rectangle class

   Click Me 

0 to its corresponding column.

With this styling in place, each rectangle class becomes the direct child of the

.rectangle_wrapper{

height: 100%;
display: grid;
grid-template-columns: repeat(1fr, 3);
grid-template-areas: "rec1 rec2 rec3";
border: 3px dotted brown;
padding: 20px;
margin: 30px;

width: 100%;
grid-area: rec1 ;
background: 

width: 100%;    
grid-area: rec2 ;
background: 

width: 100%;
grid-area: rec3 ;
background: 

4, allowing the rectangles to be stacked in a horizontal line.

Open up

  
Div 1
  
Div 2
  
Div 3

4 in your browser. The webpage should look similar to the screenshot below:

Note that the parent class needs to be given a relative position because it automatically allows for its descending elements to overlap. CSS grid can be used to create three-dimensional layouts, and all elements within the parent will be relatively absolute to the parent unit.

Putting it all together: Building a 3D button

In this section, we’ll use the techniques demonstrated above to build a 3D button. Here’s what the final button will look like:

You may be wondering why we haven’t used properties like

   Click Me 

3 or

   Click Me 

4 to style the examples above. The reason is that animating those properties is expensive and does not make room for smooth transitioning.

Make a copy of the

  
Div 1
  
Div 2
  
Div 3

4 file, and replace the code within the

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

0 tag with the code below:

   Click Me 

Next, replace the code in

  
Div 1
  
Div 2
  
Div 3

5 with the code below:

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

Here, we set the

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; margin: 0 auto; }

0 pseudo-class to

   Click Me 

9,

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

0,

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

1, and

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

2. This will ensure all its descendants will be positioned in the center of the webpage.

Next, add the following code to

  
Div 1
  
Div 2
  
Div 3

5 to create the button MVP:

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

The

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

4 element has a dark-green background that represents the button’s bottom layer. We’ve removed the button’s default border by indicating

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

5. The

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

6 class represents the foreground layer of the button, which has a lighter shade of green color as the background.

We use the

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

7 CSS property to create a sliding effect each time the button is in its

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

8 state. The resulting MVP for the button should look similar to the screenshot below:

The button is already looking 3D! Next, let’s add a hover state to the button. Add the code below to

  
Div 1
  
Div 2
  
Div 3

5 to create a

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

0 effect:

... .front{ ... will-change: transform; transition: transform 250ms; } .clickable:hover .front { transform: translateY(-8px); }

Note that we added the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

1 property. This is a best practice that allows the hover animation to be hardware-accelerated. The end result should look similar to the following gif:

Next, let’s add shadow to the button to enhance the 3D effect. To achieve this, we’ll have to restructure the markup in

  
Div 1
  
Div 2
  
Div 3

4:

... ...

0

Previously, the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

3 class was the edge layer. With the introduction of two layers, it is imperative that we make the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

3 class the parent of the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

5,

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

6, and

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

6 classes using

... .rectangle_wrapper { height: 50px; width: 200px; position: relative; } .rectangle1, .rectangle2, .rectangle3 { position: absolute; width: 100%; height: 100%; border-radius: 10px; } .rectangle1 { top: 20px; background:

6b9080;

} .rectangle2 { top: 30px; background:

eaf4f4;

} .rectangle3 { top: 40px; background:

cce3de;

}

7.

Replace the code for the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

3 and

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

6 classes with the code below:

... ...

1

We’re simply using the stacking techniques we reviewed earlier to stack the button layers by setting the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

3 class to

... .rectangle_wrapper { height: 50px; width: 200px; position: relative; } .rectangle1, .rectangle2, .rectangle3 { position: absolute; width: 100%; height: 100%; border-radius: 10px; } .rectangle1 { top: 20px; background:

6b9080;

} .rectangle2 { top: 30px; background:

eaf4f4;

} .rectangle3 { top: 40px; background:

cce3de;

}

7. In so doing, we’re implying that each descending element should be placed on top of it.

Let’s add the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

5 and

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

6 classes and their

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

0 effects:

... ...

2

Here, we forced the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

5 and

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

6 classes to take

... .front{ ... will-change: transform; transition: transform 250ms; } .clickable:hover .front { transform: translateY(-8px); }

8 of both the

... .front{ ... will-change: transform; transition: transform 250ms; } .clickable:hover .front { transform: translateY(-8px); }

9 and

... ...

00 of their parent, which, in this case, is the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

3 class. We also set their

... ...

02 and

... ...

03 to ensure they are positioned in the center of their parent class, with no default margins.

Each time a user hovers the button, the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

5 class moves

... ...

05 downward and the

• { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 1100px; display: flex; justify-content: center; align-items: center; justify-items: center; }

6 class moves

... ...

07 upwards, revealing the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

6 class. The button should now look like the gif below when hovered:

We’ve relied solely on DOM order to stack the HTML elements — no need for

... ...

5. This has revealed a fair share of best practices for stacking and positioning overlapping elements in CSS.

We can finish the button by adding a

... ...

10 effect to the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

5 class to make it look softer and more appealing. Add the code below to the

... .clickable { background:

2d6a4f;

border-radius: 12px; border: none; padding: 0; cursor: pointer; outline-offset: 4px; } .front { display: block; padding: 12px 42px; border-radius: 12px; font-size: 1.4rem; color:

fff;

background:

52b788;

transform: translateY(-6px); } .clickable:active .front { transform: translate(-2px); }

5 class:

... ...

3

The final result of the button should look like this:

You can take a look at the complete source code for this section here. The entire project is available in this GitHub repo.

Conclusion

With the techniques you’ve learned in this tutorial, you can implement complex overlapping elements with 3D effects in your new and existing web applications using only CSS and HTML.

If you want to build on the principles we covered today, you may want to try implementing a sticky header, or two overlapping wheels, with one rotating clockwise and the other counterclockwise. The guidelines covered in this tutorial are your best bet — let me know how it goes.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

How to stack things on top of each other in CSS?

When we want to put elements on top of each other, it's often best to use the position: absolute CSS property. This is because absolute positioning ensures that the elements are positioned at an exact location on the page and won't move around or affect the other elements around them.nullAdvanced CSS Positioning: How to Stack Elements on - SheCodeswww.shecodes.io › athena › 9283-advanced-css-positioning-how-to-stack-...null

How to place two elements on top of each other in CSS?

Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.10 thg 7, 2020nullHow to stack elements in CSS ? - GeeksforGeekswww.geeksforgeeks.org › how-to-stack-elements-in-cssnull

How to make an element appear on top of another in CSS?

To bring an element to front of another element, you can use the CSS z-index property. The z-index property specifies the stack order of an element. An element with greater z-index value will be displayed in front of an element with a lower z-index value.nullHow to bring an element to the front in CSS using z-index - SheCodeswww.shecodes.io › athena › 72599-how-to-bring-an-element-to-the-front-i...null

How to overlap items in CSS?

Utilize the z-index property to control the stacking order of elements, ensuring the desired layering. Implement a hover effect with increased z-index values for both elements to bring them to the forefront on hover.nullHow to handle Overlapping Elements with Z-Index using CSSwww.geeksforgeeks.org › how-to-handle-overlapping-elements-with-z-ind...null