Positions in CSS

What is the Position?

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

  • The top, right, bottom, and left properties determine the final location of positioned elements.

  • There are mainly 5 position values in CSS, and these are: i) static, ii) relative, iii) absolute, iv) fixed, v) sticky


This will be our boilerplate:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Positions in CSS </title>
    <style>
        .para {

        }
    </style>

</head>
<body>
    <p class="para"> Thanks for visiting geekshelp.org</p>
</body>
</html>


Different Position Property values

i) static: This is the default CSS position value for HTML elements.

.para {
        position: static;
 }


ii) relative:  Relative means the HTML element is related to its normal position and will leave a gap at its normal position.

.para {
        position: relative;
 }


iii) absolute: Elements with the absolute position are relative to the position of their first parent element.

.para {
        position: absolute;
 }


iv) fixed: Elements with the fixed position are always relative to the viewport. Elements with fixed positions will always stay in the same position on the screen.

.para {
        position: fixed;
 }


v) sticky: The sticky position is based on the user's scroll position.

.para {
        position: sticky;
 }

Using Position Properties

<!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> Positions in CSS</title>
    <style>
        .absolute {
            position: absolute;
            top: 20rem;
            right: 20px;
            padding: 5px;
        }
    </style>
</head>
<body>
   
    <p class="absolute"> Thanks for visiting geekshelp.in</p>
</body>
</html>

Output:


CSS Positions Property PDF

Download Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad