Positions

Positions
Positions are used to arrange the elements in a web page. It will change the
position based on position behavior.

They are:
1.Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

To deal with positions we have to use helping properties.

They are:
1. top
2. bottom
3. Left
4.right
 Positions
1. Static:
a. It is the default value.
b. It will not perform any changes to the element.
c. Helping properties was not required.

2. Relative:
a. It will change the position of an element with respect to the original position.
b. It will leave an empty space. It doesn’t allow other elements to occupy its place.

3. Absolute:
It will change the position of an element with respect to the parent.
b. By default the parent is a viewport, if we need to change we have to pass position:relative
for parent element.
c. It will not leave any empty space. It allows other elements to occupy its place.
d. If we provide position:absolute for all the elements , all elements will float on each other.
e. To specify which element has to float top or bottom , we have to use the z-index property..
 Positions
4. Fixed:
a. It will fix the position of an element.
b. To fix the position we have to mention the helping properties.

5. Sticky:
A .Initially these elements will scroll until it reaches to some point.
b. Then it will stick at that position.

Note: If we specify the position as relative / absolute / fixed /

sticky elements will float on the z-axis. All of the above need the
help properties. We should not use top and bottom / left and right
at a time.
 Z-Index

Z-index
The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with

a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position:

relative, position: fixed, or position: sticky)
 Display property
Display
Display property allows to change the behavior of an element.
It accepts the values like

● None
● Inline
● Block
● Inline-block
● Flex
● Grid
 Display property
None:
● This will not display anything in the browser.
● As well as it will not occupy any space for the element.

Inline:
● It will convert the element into inline-level.
● So then the element will occupy only content height and width.
● We cannot assign height & width properties.

Inline-Block:
● It will convert the elements into inline-block level.
● So then it will have features of both inline & block level.
● Because of inline → It will display in the same line.
● Because of block → we can assign height & width properties.
 Display property
Flex:
● It will layouts the webpages in one dimensional
format.
Grid:
● It will layouts the webpages in two dimensional
format
 FLEX
Flex:
• It will layouts the webpages in one dimensional
format.
• To work with flex boxes, We need a flex container
and all the direct children will become the flex-
items. (ONLY DIRECT CHILDREN).
 FLEX
Flex Container Properties:
1. Display : flex
2. justify-content
3. align-items
4. flex-direction
5. flex-wrap
6. align-content
7. column-gap
8. row-gap
9. gap
 FLEX
1. display: flex;
This is the main property we must use to work with
flex boxes. By assigning this property we are able to
use all flex properties.
2. Justify-content
It will align the flex-items on the main axis.
Syntax:
justify-content: values;
Values = start , center , end , space-between ,
space-evenly , space-around.
The default value is start.
 FLEX
2. justify-content: values;
 FLEX
3. align-Items: It will align the flex-items on the cross
axis.
Syntax:
align-items: values;
Values = start , center , end , stretch ,
baseline.
The default value is start.
 FLEX
3. align-items: values;
 FLEX
4. flex-direction: It will specify the direction of flex-
items. Whether to display in row format or column
format. It will decide the main axis.

Syntax:
flex-direction: values;
Values = row , column , row-reverse ,
column-reverse.
The default value is row.
 FLEX
4. flex-direction: values;
 FLEX
5. flex-wrap: It will specify whether to wrap the flex-
items into the next line or not.
Syntax:
flex-wrap: values;
Values = nowrap , wrap , wrap-reverse.
The default value is nowrap.
 FLEX
5. flex-wrap: values;
 FLEX
6. align-content: It will specify the position of
wrapped flex items.
Syntax:
align-content: values;
Values = start , center , end , space-between ,
space-around , stretch
 FLEX
6. align-content: values;
 FLEX
7. gap:
It is a shorthand property of row-gap & column-gap. It
will specify the space between the flex items.
Ex: row-gap:20px & column-gap:20px;
 FLEX
gap : 20px;
 FLEX
Flex items Properties:
1. order
2. align-self
3. flex-grow
4. flex-basis
5. flex-shrink
6. flex
 FLEX
1. Order : It will arrange the flex-items in an order.
Ex:
 FLEX
2. align-self:
By using this property, we can align the flex-items
individually.
It will override the default alignment which is specified
by align-items.
It will accept all the values which can be acceptable
by align-items property.
The only difference is
i. align-items for container for all flex-items.
ii. align-self for items for individual flex-item.
 FLEX
2. align-self: value;
Values :
 FLEX
3. Flex-grow:

It will make sure the flex-items have to fit to the flex-

container.
It will increase the size of the flex–items based on
remaining space.
The remaining space in a container will be divided
into units and it will be added to each flex-item based
on flex-grow values
 FLEX
3. Flex-grow:
 FLEX
4. flex-basis It is equivalent to the width property.
This overrides any previously defined width for that
element.
Ex:
 FLEX
5. flex-shrink: It will shrink the size of the flex-items.
Based on the extra space required in a container to fit
all the flex-items.
If there is no enough space in a container to fit all the
flex-items then all flex-items will shrink(decreases)
equally and fit’s in a container.
 FLEX
5. flex-shrink
 FLEX
6. Flex
It is a shorthand property of flex-grow , flex-shrink and
flex-basis.
Ex: flex: 1
flex : flex-grow flex-shrink flex-basis;
flex : 1 1 400px;
If we specify flex 1 , it will increase , decrease , and
width equally.
 GRID
GRID:
• It will layouts the webpages in two dimensional format.
• To work with grid, We need a grid container and all the direct
children will become the grid-items. (ONLY DIRECT
CHILDREN).
GRID Container Properties:
1. Display : grid
2. grid-template-columns
3. grid-template-rows
4. column-gap
5. row-gap
6. gap
 GRID
1. display: grid;
It specifies the container as a grid container.
So that we can use all the grid properties.

2. grid-template-columns
It will specify no.of columns along with the width of each column.
As the width of the cell is defined here, It is not required to
mention again for the grid item.

3. grid-template-rows
It will specify no.of rows along with the height of each row.
As the height of the cell is defined here, It is not required to
mention again for the grid item.
 GRID
/* CSS Code */
section {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
/* It will consider as 4 columns each with 200px width */
grid-template-rows: 150px 50px 150px 30px 100px;
/* It will consider as 5 rows with widths => 1st - 150px , 2nd - 50px , 3rd - 150px , 4th -
30px , 5th - 100px*/
}
 GRID
We can pass the values for grid-template-rows and grid-
template-columns in multiple ways.
grid-template-columns: 200px 100px 150px 100px 80px 20px;

grid-template-columns: 200px 200px 200px 200px;

grid-template-columns: 150px 150px 150px 150px;
grid-template-columns: repeat(4, 180px);
grid-template-columns: repeat(4, auto);
grid-template-columns: 1fr 3fr 1fr;
grid-template-columns: repeat(4,1fr);

grid-template-rows: 150px 150px 100px;

grid-template-rows: 1fr 1fr 1fr;
grid-template-rows: 1fr 5fr 1fr;

grid-template-rows: 0.5fr 0.2fr 1fr 0.2fr;

 GRID
4. gap:
It will specify the space between the grid items.
It is the shorthand property of row-gap & column-gap.
section {
row-gap: 5px; column-gap: 20px;
===== or ======
gap: 5px 20px;
}
 GRID

GRID items Properties:

1. grid-row-start
2. grid-row-end
3. grid-row
4. grid-column-start
5. grid-column-end
6. grid-column
7. grid-area
 GRID
1. grid-row :
It is a shorthand property of grid-row-start and grid-row-end.
Grid-row-start will specify where to start the row.
Grid-row-end will specify where to end the row.
Syntax: grid-row: grid-row-start/grid-row-end
Ex: grid-row: 1/5;
.item1 {
grid-row-start: 1;
grid-row-end: 5;
======= or =======
grid-row: 1/5;
}
 GRID
2. grid-column :
It is a shorthand property of grid-column-start and grid-column-end.
Grid-column-start will specify where to start the column.
Grid-column-end will specify where to end the column.
Syntax: grid-column: grid-column-start/grid-column-end
Ex: grid-column: 1/5;

.item1 {
grid-column-start: 1;
grid-column-end: 5;
======= or =======
grid-column: 1/5;
}
 GRID
3. grid-area :
It is the shorthand property of grid-row-start , grid-column-start , grid-
row-end and grid-column-end.
Syntax: grid-row-start/grid-column-start/grid-row-end/grid-column-end.
Ex: grid-column: 1/1/3/5;

.item1 {
grid-area: 1/1/3/5;
}