Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Challenge: Stacking Order | Item Positioning
Advanced CSS Techniques

Challenge: Stacking OrderChallenge: 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
html

index.html

css

index.css

js

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.

html

index.html

css

index.css

js

index.js

Все було зрозуміло?

Секція 2. Розділ 11
course content

Зміст курсу

Advanced CSS Techniques

1. Introduction

Course OverviewCourse FocusCourse TopicsHow to Succeed

2. Item Positioning

What is Positioning?Relative PositioningChallenge: Relative PositioningAbsolute PositioningChallenge: Absolute PositioningFixed PositioningChallenge: Fixed PositioningSticky PositioningChallenge: Sticky PositioningStacking OrderChallenge: Stacking OrderContent Overflow

3. Transitions

What is Transition?Selecting Transition PropertyTransition DurationTransition Time FunctionTransition Time DelayTransition CombinationChallenge: Adding Transition

4. Animations

What is Animation?Specifying Time of the AnimationControlling Animation Play Quantity and DirectionManaging Animation StateAnimation CompositionChallenge: Adding Animation

5. Transformations

What is Transformation?ScalingRotatingChallenge: Adding Scaling & RotatingTranslateSkewingPerspectiveChallenge: Adding Translating and Skewing

6. Adaptive/responsive websites and apps

What is Adaptive/Responsive Design?@media QueryAdaptive - Responsive layoutsInspecting the Web PageChallenge: Inspecting Adaptive/Responsive Layout

7. Preprocessors

What is Preprocessor?Sass SyntaxSass VariablesSass Numeric OperatorsSass Nesting@extend DirectiveFolder-File Structure

Advanced CSS Techniques

Challenge: Stacking OrderChallenge: 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
html

index.html

css

index.css

js

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.

html

index.html

css

index.css

js

index.js

Все було зрозуміло?

Секція 2. Розділ 11
some-alt