8/11/21

CSS Position Properties :- CSS Tutorials

CSS Position

The CSS Position Property is used to position any Html element before or after any Html element you want. You can place Html element anywhere you want. You can set the position of Html element by using top, bottom, left, right properties. This property is used when you set the position property of the element first. 

Basically, The CSS Position property has 4 basic Parts:- 

  • CSS Static Positioning
  • CSS Fixed Positioning
  • CSS Absolute Positioning
  • CSS Relative Positioning

CSS STATIC POSITIONING

This is by default the position of the Html element. They appear normally on your web pages. They didn’t affect any positioning on your webpage. 

CSS Fixed Positioning

This property is used to fix the position of the Html element on your web pages. When you apply this property to the Html element they fixed their position. It doesn’t move even you scroll your window screen. Let see an example to clear this property. 

Example:-

<!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>Position in CSS </title>

</head>
<style>
    div{
        border2px solid black;
        height320px;
        width420px;
        marginauto;
        overflowscroll;
    }
    h1{
        colorred;
        positionfixed;
        left320px;
    }
</style>
<body>
    <div>
        <h1> Tokyo Olympics 2020</h1>
        <p>Lorem ipsum, dolor s elit. Corporis explicabo eveniet repellat?</p>
        <p>Lorem ipsum, doicing elit. Corporis explicabo eveniet repellat?</p>
        <p>Lorem ipsum, dolor sit asicing elit. Cobo eveniet repellat?</p>
        <p>Lorem ipsum, dog elit. Corporis explicabo eveniet repellat?</p>
        <p>Lorem ipsum, dolor sit amet g elit. Corpori eveniet repellat?</p>
        <p>Lorem ipsum, dolor sit ameorporis explicabo eveniet repellat?</p>
        <p>Lorem ipsum, dolor sit amet  Corporis explicabo eveniet repellat?</p>
    </div>
</body>
</html>

Output :- 


CSS Relative Property 

The relative positioning property is used to set the element relative to its normal position. 

Example:-

<!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>Position in CSS </title>

</head>
<style>
   
    h1{
        colorred;
        positionrelative;
       
    }
</style>
<body>
    <div>
        <h1> Tokyo Olympics 2020</h1>
        <p>Lorem ipsupisicing elit. Corporis explicabo eveniet repellat?</p>
        <p>Lorem ipsum,adipisicing elit. Corporis explicabo eveniet repellat?</p>
        <p>Lorem ipsum, adipisicing elit. Corporis explicabo eveniet repellat?</p>
        <p>Lorem ipsum, dolor elit. Corporis explicabo eveniet repellat?</p>
        <p>Lorem ipsum, dolor sit . Corporis explicabo eveniet repellat?</p>
        <p>Lorem ipsum, dolor  Corporis explicabo eveniet repellat?</p>
        <p>Lorem ipsum, dolor  Corporis explicabo eveniet repellat?</p>
    </div>
</body>
</html>

Output:-

CSS Absolute Positioning

In this property, the position is relative to its first position. In other words, It is positioned relative to its closest positioned ancestor. Let’s see through an example below:- 

Example:-

<!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>Position in CSS </title>

</head>
<style>
    body{
        background-colorlightblue;
    }
   h2{
       positionabsolute;
       background-colorlightcoral;
       colorblue;
       top200px;
       left100px;
   }
   h3{
       coloryellow;
       background-colorcornflowerblue;
   }
    h1{
        colorred;
        background-colorcornsilk;
        positionabsolute;
        top250px;
        left300px;
       
    }
</style>
<body>
   <p> It started from top left cornor. </p> 
   <h3> This is a heading without positioning.</h3>
    <h1> This is a Heading 1. </h1>
    <h2> This is a Heading 2. </h2>
</body>

</html> 

Output :- 


1 comment:

  1. Enormous blog you individuals have made there, I entirely appreciate the work.
    user experience design companies

    ReplyDelete

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Mad About Computer. Powered by Blogger.