GitHunt
GU

Guram-Bagalishvili/geolab_frontend_2

CSS Layout - The position Property

Geolab_Frontend - geolab_frontend_2

Table of contents

Overview

Screenshot

https://snipboard.io/RGm1SD.jpg

My process

  • Before coding i identified the structure of design and write it down. Then i realized what was the best way to group objects.
    After that i start thinking what techniques should i use for positioning elements in specific places. Then i start to code.

Built with

  • Semantic HTML5 markup
  • CSS custom properties

What I learned

How to use the position property in CSS - position: relative; position: absolute;

The position Property - static - An element with position: static; is always positioned according to the normal flow of the page.
relative - An element with position: relative; is positioned relative to its normal position.
fixed - An element with position: fixed; is positioned relative to the viewport.
absolute - An element with position: absolute; is positioned relative to the nearest positioned ancestor.
sticky - An element with position: sticky; is positioned based on the user's scroll position.

Continued development

In the next project I want to focus on CSS Transitions.

Useful resources

Author

Acknowledgments

Geolab_Frontend course helped me a lot for organizing and learning this topic. Big thanks to Mushni Chankseliani for creating this cource