CSS Course Hindi - Beginner to Pro ( 2023 ) | Chapter 5

Notes

Position

We can use position property to move elements ,whatever place we like.
For very complex css design we use position property more and more.
For Example if you want to stick navbar on top of page during page scroll
then we can apply position:sticky to it.
There are five different position values:
  • static
  • relative
  • fixed
  • absolute
  • sticky
 

Static

HTML elements are positioned static by default.
So you don’t need to apply it.
 

Fixed

An element with position: fixed;  is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
We can change is its position by applying left right top bottom properties
 

Relative

An element with position: relative; is positioned relative to its normal position.
 

Sticky

An element with position: sticky;  is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
 

Absolute

An element with position: absolute; is positioned relative to the nearest position parent element
 
 

Grid

Grid is used to create 2d layouts
Where you can control elements position based on row and column
Grid is made up of rows and column
notion image
 
grid-template-columns: it specify how many number of columns do you want
grid-template-rows: it specify how many number of columns do you want
on both property you can specify size of columns and rows
Examples
grid-template-columns: 100px 200px 200px; grid-template-rows: 80px 200px;
notion image
You can use almost all property of flex inside grid container
Grid container has more property
like place-content, place-items , place-self
 
Some of grid item properties
.item1{
grid-column: 1 / 5
} how many columns do you want to cover
notion image
.item1{
grid-row: 1 / 4
} how many row do you want to cover
notion image
.item8 {
/* row column row column * /
grid-area: 1 / 2 / 5 / 6;
}.
if you want specify both properties ( grid-row & grid-column ) at same time then you can use grid-area;
notion image
 
Grid Template Area
 
here a b c are grid area id of each element using that we can easy control behaviour of grid layout. look below example
grid-template-areas: "a a a" "b c c" "b c c";
notion image
 
 
 

Exercises