Everything about css position

Position properties:

With this property we need some helping properties. By using position property we decide that from where the position will start or we can say from where the position properties will start positioning.
position:static;
position:relative;
It is uses to set position from it's present position.

position:absolute;
This value helps us to set position according to the screen size.

position:fixed;
This value helps us to fixed position of element or content.

position:sticky;
This value is also work same as like fixed but we can see the
effect when we scroll the page.

Helping properties of position property:

These properties are use to help other main properties, but we can also
use them individually.
left: value in pixel or percent;
Used to give space from the left side.

right:value in pixel or percent;
Used to give space from the right side.

top:value in pixel or percent;
Used to give space from the top side.

bottom:value in pixel or percent;
Used to give space from the bottom side.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    .div1{
        position:absolute;
        left:50px
        top:50px;
    }
    .div2{
        position:relative;
        left:100px;
    }
    .div3{
        position:fixed;
    }
    .div4{
        position:sticky;
        top:300px;
    }
</style>
</head>
<body>

<div class="div1">absolute</div>
<div class="div2">relative</div>
<div class="div3">fixed</div>
<div class="div4">sticky</div>

</body>
</html>

CSS z-index

z-index: value negative and positive numeric value and default is auto.
z-index is used to move elements downward or upward on the z-axis.

Suppose you have two div. Now you want to put the second div on the first div. In this you will use z-index.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    .div1{
        background-color:gray;
        left:50px;
        top:100;
        z-index:1;
    }
    .div2{
        background-color:green;
        left:100px;
        top:150;
    }
    .div3{
        background-color:gray;
        left:150px;
        top:200;
        z-index:-1;
    }
</style>
</head>
<body>

<div class="div1">A </div>
<div class="div2">B </div>
<div class="div3">C </div>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us