CSS Position

In this example below you will see how to do a CSS Position with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 01fade, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 01fade ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Position</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="static">1. Static</div>
<div class="static">2. Static</div>
<div class="relative">3. Relative</div>
<div class="absolute">4. Absolute</div>
<div class="fixed">5. Fixed</div>
<div>6. Default</div>
<div class="static">7. Static</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/01fade/css-position-jExpWe */
body {
  border-left:10px dashed #fff;
  background-color:#ff0048;
  height:1000px;
  padding-left:40px;    
}

div {
  width:150px;
  background-color:#444;
  border:1px solid #000;
  border-left-width:4px;
  font:normal 22px/100px Gill Sans,Sans-Serif;
  color:#fff;
  text-align:center;
}

.static {
  position:static;
}

.relative {
  position:relative;
  top:20px;
  left:20px;
}

.absolute {
  position:absolute;
  top:20px;
  left:120px;
}

.fixed {
  position:fixed;
  bottom:20px;
  right:20px;
}

Comments