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

Relative PositioningRelative Positioning

Relative positioning allows us to position an element visually relative to its original positioning. At the same time, the neighboring elements do not take the element's place.

“position

We can use the properties of top, left, bottom, and right to indicate the visual displacement of an element with respect to its initial position. The values can be positive and negative in different units (px, %, etc.). Let's run the following example to see what effect we can get:

html

index.html

css

index.css

js

index.js

Note

It is essential to mention that there is no need to specify all top, bottom, left, and right properties for the element with the position value that differs from the static. It is enough to set one property for the vertical positioning (top or bottom) and one for the horizontal positioning (left or right).

What does the position: relative property do?

Виберіть правильну відповідь

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

Секція 2. Розділ 2
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

Relative PositioningRelative Positioning

Relative positioning allows us to position an element visually relative to its original positioning. At the same time, the neighboring elements do not take the element's place.

“position

We can use the properties of top, left, bottom, and right to indicate the visual displacement of an element with respect to its initial position. The values can be positive and negative in different units (px, %, etc.). Let's run the following example to see what effect we can get:

html

index.html

css

index.css

js

index.js

Note

It is essential to mention that there is no need to specify all top, bottom, left, and right properties for the element with the position value that differs from the static. It is enough to set one property for the vertical positioning (top or bottom) and one for the horizontal positioning (left or right).

What does the position: relative property do?

Виберіть правильну відповідь

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

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