CSS position Property - Playground Example

« Back to CSS position Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { 
   background: khaki;
   height: 2000px;
} 
h1 { 
   position: static;
} 
.relative { 
   position: relative; 
   left: 200px; 
   width: 200px;
   height: 250px;
   border: 5px solid;
} 
.absolute { 
   position: absolute;
   left: 40px; 
   width: 150px; 
   height: 100px;
   border: 5px solid green; 
} 
.fixed { 
   position: fixed; 
   left: 40px; 
   width: 150px; 
   height: 100px; 
   border: 5px solid red;
}
</style>
</head>
<body>
<h1>h1 {position: static;}</h1> 
<div class="relative">div position: relative;
<div class="absolute">div position: absolute;</div> 
<div class="fixed">div position: fixed;</div>
</div>
</body>
</html>

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee