Introduction to CSS

Cascading Style Sheet(CSS) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen.

CSS is among the core language of the open web and is standardized across web browsers according to W3C specifications. Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; everything is now CSS without a version number.

Position

An element's position in a document is determined by the position CSS property. You can position your favorite part anywhere on the webpage, as long as you follow the rule of positioning.

By using the position property we can set the positioning behavior and the top, right, bottom, and left properties can set the location of positioned elements.

Syntaxes

position: absolute;
position: relative;
position: sticky;
position: fixed;
position: static;
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

Description of position values:

`absolute`

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of the top, right, bottom, and left.

This value creates a new stacking context when the value of the z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

`relative`

The element is positioned according to the document's normal flow, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if the position were static.

This value creates a new stacking context when the value of the z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

`sticky`

The element is positioned according to the document's normal flow, and then offset relative to its nearest scrolling ancestor and containing block, including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

A sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism", even if that ancestor isn't the nearest scrolling ancestor.

`fixed`

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none, or the will-change property is set to transform, in which case that ancestor behaves as the containing block. Its final position is determined by the values of the top, right, bottom, and left.

This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

`static`

The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

These all are the position values which is generally used in developing a site. The rest are global values.

Example for positioning

Here we can use FlexBoxes to learn the general position values.

Code:

HTML:

<body>
    <h1>FlexBox Works</h1>
    <div class="out1">
        <div class="out2">
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb50">fixed</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb40">Sticky</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb30">Relative</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb20">Absolute</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Static</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
            <div class="item" id="numb1">Flex</div>
            <div class="item" id="numb2">Flex</div>
            <div class="item" id="numb3">Flex</div>
            <div class="item" id="numb4">Flex</div>
            <div class="item" id="numb5">Flex</div>
        </div>
    </div>
</body>

CSS:

*{
    box-sizing: border-box;
    background-color: #995db5;
}
h1{
    color: #473434;
    text-align: center;
}
.out1{
    display: flex;
    justify-content: center;
    align-items: center;
}
.out2 {
    border: 2px dotted rgb(74, 51, 51);
    width: 50%;
    padding: 2%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.item{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 50px;
    margin: 3%;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    border-radius: 13px;
    color: rgb(24, 37, 89);
    font-size: 18px;
    font-weight: 700;
}
#numb40{
    position: sticky;
    top: 2px;
    background-color: maroon;
}
#numb50{
    position: fixed;
    bottom: 10px;
    background-color: aqua;
}
#numb30{
    position: relative;
    top: 15px;
    left: 40px;
    background-color: rebeccapurple;
}
#numb20{
    position: absolute;
    top: 30px;
    right: 10px;
    background-color: #fff;
}
#numb10{
    position: static;
    top: 20px;
    right: 30px;
    bottom: 40px;
    left: 10px;
    background-color: khaki;
}

Output:

https://codepen.io/Prajwal-V-Naik/pen/dyKgKyj

Note:

Look at Absolute with a white background it is placed absolutely right as the position described in the code. (You can play with top, right, bottom, and left in the id numb20)

Look at Relative with a purple background it is placed as the position described in the code. (You can play with top, right, bottom, and left in the id numb30)

Look at Sticky with the red background it gets stuck when the scroll is up at the position described in the code. (You can play with top, right, bottom, and left in the id numb40)

Look at Fixed with the light blue background it is placed at bottom of the web page as the position described in the code and it will never change the position when you scroll up or down through the page. (You can play with top, right, bottom, and left in the id numb50)

Look at static with a khaki background it is placed on the side of the parent <div>but locations like the top, right, bottom, and left are not affected. (You can play with top, right, bottom, and left in the id numb10)

This is a short article about the position.

Happy learning

"Start to learn"

Prajwal V Naik's Blog

Prajwal V Naik's Blog

Put your favorite in the prime "Position" on your webpage

Make sure you know it before placing a source or element on a webpage

Table of contents

Introduction to CSS

Position

Syntaxes

Description of position values:

`absolute`

`relative`

`sticky`

`fixed`

`static`

Example for positioning

Put your favorite in the prime "Position" on your webpage

Make sure you know it before placing a source or element on a webpage

Table of contents

Introduction to CSS

Position

Syntaxes

Description of position values:

absolute

relative

sticky

fixed

static

Example for positioning

Did you find this article valuable?

`absolute`

`relative`

`sticky`

`fixed`

`static`