Vinayak Singh

CSS layout

Vinayak Singh's photo
Vinayak Singh
·

3 min read

CSS layout

What is layout in CSS?

CSS layout techniques allow us to take elements contained in the page and control where they're positioned to the relative factors.

In CSS we have Total 5 types of layouts

  • Normal flow

  • float

  • position

  • flex

  • grid

Normal flow:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout</title>
</head>
<body>
    <h1>Normal flow layout</h1>
    <p class="item item1">1st para</p>
    <p class="item item2">2nd para</p>
    <p class="item item3">3rd para</p>
</body>
</html>

fffff

In the output, our element's order is the same as we added in our HTML page. this is normal flow.

float:-

float property specifies how we can position an element within the container, float is majorly used when we want to align elements horizontally next to each other.

float's properties are -

  • none

  • left

  • right

        .item1{
            float: right;
        }
        .item2{
            float: none;
        }

Position:-

The CSS position CSS property sets how an element is positioned in our document.

Position property has 5 most usable properties(static, relative, fixed, sticky, absolute)

We can position an element on the top, right, bottom or left with the help of the position property.

static-

The element is positioned according to the Normal flow of the document.

When we assign static of any element. then top, right, left, bottom and z-index properties have no. effect. And this is the default value of our HTML page.

relative:-

The element is positioned according to the normal document flow and will change its position according to the given values of top, right, bottom and left.

  • It will not break the normal document flow.

  • The properties like the top, right, bottom, left and z-index will affect the element.

  • The element will leave the space at its original position.

fixed:-

ex.- When we want to create a chat box on our website, we use position fixed.

As the name suggests, the element will be fixed to a particular position on the page, which means the element will be in the same position always even if the user scrolls the page.

  • it will break the normal document flow to position the element on the page.

  • The properties like a top, left, right, bottom and z-index will affect the element.

  • The element will not leave any space in its original position.

sticky:-

The element is positioned based on the user’s scroll position.

  • It will not break the normal flow of the document to position the element on the page.

  • It toggles between the position relative and fixed.

  • It will behave like a relative position unless it reaches the given position, after reaching the given position it will behave like a fixed position.

  • The properties like top, left, right, bottom and z-index will affect the element.

  • It will work only if any of the properties (top, left, right or bottom) is specified.

CSS3