Ritesh kushwaha's Blog

Positions in CSS

Photo by Ferenc Almasi on Unsplash

Positions in CSS

Ritesh kushwaha's photo
Ritesh kushwaha
·

3 min read

Position in CSS

In this article we are going to learn about positions of the elements in CSS . It is very important property to get the control of the elements .

There are five different position values

  • Static
  • Relative
  • Absolute
  • Fixed
  • Sticky

We should keep in the mind that all the element have the position : static

Lets talk about static

This is the default value for elements . The left, right, top, bottom and z-index properties do not affect an element with position: static.

We should keep in the mind that position:absolute take care about his parent elements .

Let us understand through example

HTML Code

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="box-1">
        <div class="box-11"> 

        </div>
        <div class="box-22"> 

        </div>
        <div class="box-33"> 

        </div>       
    </div> 
</body>
</html>

CSS Code



.box-1{

    width: 300px;
    height: 312px;
    background-color: skyblue;
    border: 2px solid black;
    margin: auto;
}

.box-11 {

    width: 100px;
    height:100px;
    background-color: red;
    border: 2px solid black;
}

.box-22 {

    width: 100px;
    height:100px;
    background-color: yellow;
    border: 2px solid black;
    position: absolute;
    left: 10px;
}

.box-33 {

    width: 100px;
    height:100px;
    background-color: orange;
    border: 2px solid black;
}

Elements with position: absolute are positioned relative to their parent elements. In this case, the element is removed from the normal document flow. The other elements will behave as if that element is not in the document. No space is created for the element in the page layout. The values of left, top, bottom and right determine the final position of the element.

Output

image_one.png

as you can see in the above output the yellow box is positioned left 10px to the body and lightbrown box moved above . The flow is considered that no yellow box present in the document .

Relative

let us understand with the same example the position relative

HTML

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="box-1">
        <div class="box-11"> 

        </div>
        <div class="box-22"> 

        </div>
        <div class="box-33"> 

        </div>       
    </div> 
</body>
</html>

CSS

.box-1{

    width: 300px;
    height: 312px;
    background-color: skyblue;
    border: 2px solid black;
    margin: auto;
}

.box-11 {

    width: 100px;
    height:100px;
    background-color: red;
    border: 2px solid black;
}

.box-22 {

    width: 100px;
    height:100px;
    background-color: yellow;
    border: 2px solid black;
    position: relative;
    left: 110px;
}

.box-33 {

    width: 100px;
    height:100px;
    background-color: orange;
    border: 2px solid black;
}

Output

image_two.png

Elements with position: relative remain in the normal flow of the document . As you can see in the above output the lightbrown box did not move anywhere . Normal flow of the document remain same and we are able to move the yellow box without any problem .

ineuronCSSHTML5Web Developmentwebdev