Course Content
Advanced CSS Techniques
1. Introduction
6. Adaptive/responsive websites and apps
Advanced CSS Techniques
Challenge: Stacking Order
Task
Create a visually appealing background for the website using an illustration composed of 5 different images. All images are correctly positioned within the frame of the parent div
element. Your task is to adjust the stacking order using the z-index
property to achieve the desired view outlined in the image below:
![“stacking](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/advanced+css+techniques/positioning+section/stacking+order+challenge+version+2.png)
index.html
index.css
index.js
To change the stacking order of the images within the parent div
element, use the z-index
property. A higher z-index
value, such as 1
, raises the element above others in the stacking context, making it visible in the foreground.
index.html
index.css
index.js
Everything was clear?
Course Content
Advanced CSS Techniques
1. Introduction
6. Adaptive/responsive websites and apps
Advanced CSS Techniques
Challenge: Stacking Order
Task
Create a visually appealing background for the website using an illustration composed of 5 different images. All images are correctly positioned within the frame of the parent div
element. Your task is to adjust the stacking order using the z-index
property to achieve the desired view outlined in the image below:
![“stacking](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/advanced+css+techniques/positioning+section/stacking+order+challenge+version+2.png)
index.html
index.css
index.js
To change the stacking order of the images within the parent div
element, use the z-index
property. A higher z-index
value, such as 1
, raises the element above others in the stacking context, making it visible in the foreground.
index.html
index.css
index.js
Everything was clear?