Position Property in CSS

Source Code : Index.HTML

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS</title>
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="position.css">
 </head>
 <body>
   <div class="main">
     Main Box
     <div class="box1 box">Box-1</div>
     <div class="box2 box">Box-2</div>
     <div class="box3 box">Box-3</div>
   </div>
 </body>
</html>

To download raw file Click Here

Source Code : Style.CSS

.main {
  border: 5px solid gray;
  width: 500px;
  min-height: 500px;
  font-weight: bold;
}

.box {
  width: 100px;
  height: 100px;
  color: white;
  padding: 10px;
  font-weight: bold;
}

.box1 {
  background-color: teal;
}

.box2 {
  background-color: tomato;
}

.box3 {
  background-color: yellowgreen;
}

To download raw file Click Here

Source Code : Position.CSS

/*
1.Static
2.Relative
    LTRB
3.Absolute
    LTRB
    Relative
4.Fixed
5.Sticky
*/

.main {}

.box1 {
 position: fixed;
 top: 200px;
 right: 200px;
}

.box2 {}

.box3 {}

To download raw file Click Here

CSS Tutorial

Properties Reference

CSS Properties Reference Guide

Position Property in CSS

Source Code : Index.HTML

Source Code : Style.CSS

Source Code : Position.CSS

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects