welcome to tutorialfamily

css position

There are 5 type of position of and element

css position

  • position: static Html element have static position by default
  • position: relative It relative to it normal position
  • position: absolute We can adjust element by top, right, bottom, left value
  • position: fixed It fixed position and will not be scroll
  • position: sticky It similar to fixed position and based on scroll

static position


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
div{
   width: 200px;
   border: 1px solid #000;
   color: #000;
   padding: 10px;
   font-size: 14px;
   position: static;
}
</style>
</head>
<body>
   <div>static position.</div>
</body>
</html>
Run

relative position


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
div{ 
   width: 200px;
   border: 1px solid #000;
   color: #000;
   padding: 10px;
   font-size: 14px;
   position: relative;
   left: 50px;
}
</style>
</head>
<body>
   <div>relative position.</div>
</body>
</html>
Run

absolute position


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
div{ 
   width: 200px;
   border: 1px solid #000;
   color: #000;
   padding: 10px;
   font-size: 14px;
   position: relative;
}
div.absolute{ 
   width: 100px;
   height: 50px;
   border: 1px solid #000;
   color: #000;
   padding: 10px;
   font-size: 14px;
   position: absolute;
   right: 20px;
   top: 50px;
}
</style>
</head>
<body>
   <div>relative position.
       <div class="absolute">absolute position.
       </div>
   </div>
</body>
</html>
Run

fixed position


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
div{ 
   width: 200px;
   border: 1px solid #000;
   color: #000;
   padding: 10px;
   font-size: 14px;
   position: fixed;
   top: 0;
   left: 0;
}
</style>
</head>
<body>
   <div>fixed position.</div>
</body>
</html>
Run

sticky position


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
div{ 
   width: 200px;
   border: 1px solid #000;
   color: #000;
   padding: 10px;
   font-size: 14px;
   position: sticky;
   top: 0;
}
</style>
</head>
<body>
   <div>sticky position.</div>
</body>
</html>
Run
Home
Next

Our Content

Learn
Learn
Learn
Learn
Learn