CSS Position Property

CSS Position Property


CSS Position Property
CSS position property is  used to position an element in html.
Syntax of this property is given down below -
Syntax - 
position : value;
Values to this property is given down below - 
1.static  -
Default value. Elements render in order, as they appear in the document flow. The top, right, bottom,
left and z-index properties do not apply.
2. relative - 
The element is positioned relative to its normal position, so left:20px adds 20 pixels to the element's
LEFT position.
3. fixed  - 
The element is positioned relative to the browser window
4. absolute -
The element is positioned relative to its first positioned (not static) ancestor element
5. initial  - 
Set this property to its default value.
6. inherit  -
Inherits this property from its parent element.
7. Sticky - 
Experimental feature. It behaves like position: static within its parent until a given offset threshold is reached, then it acts as position: fixed.
Now we will see Example - 
Example - 
<!DOCTYPE html>
<html lang="en">
<style>
  #p1 {
  position: static;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
}
#c1 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

#p2 {
  position: relative;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
}

#c2 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

#p3 {
  position: absolute;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
  top: 750px;
  right: 15px;
}

#c3 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

#p4 {
  position: fixed;
  border: 1px solid blue;
  background-color: rgba(165, 32, 32, 0.5); 
  width: 300px;
  height: 100px;
  bottom: 0;
  left: 0;
  right: 0;
}

#c4 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}
</style>
<head>
    <link rel="stylesheet" href="sample.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


    <title>Document</title>
</head>
<body>
    <html>

  <head>
      <title>HTML Tables</title>
  </head>

  <body>
<h1>this is sample heading</h1>
    <div id="p1">This is p1
      <div id="c1">this is c1</div>
    </div>
 
    <h2>heading</h2>
    <div id="p2">this is p2.
      <div id="c2">this is c2</div>
    </div>
 
  <h2>heading</h2>
    <div id="p3">this is p3
      <div id="c3">this is c3</div>
    </div>
 
    <h2>heading</h2>
 
    <div id="p4">this is p4
      <div id="c4">this is c4</div>
    </div>
    </body>
</html>
     
</body>

</html>
Output -