A Pen by Matt Studdert

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Matt Studdert</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="position-fixed">
  <h1>FEWD Positioning</h1>
</header>

<section>
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, harum ipsa dolorum obcaecati quibusdam sequi iste maxime culpa. Doloremque corrupti ipsa mollitia laboriosam, vero nesciunt nisi labore, placeat quo eaque.
    </p>
  </div>
</section>

<section class="position-relative">
  <div class="position-absolute"></div>
</section>

<section>
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, harum ipsa dolorum obcaecati quibusdam sequi iste maxime culpa. Doloremque corrupti ipsa mollitia laboriosam, vero nesciunt nisi labore, placeat quo eaque.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, harum ipsa dolorum obcaecati quibusdam sequi iste maxime culpa. Doloremque corrupti ipsa mollitia laboriosam, vero nesciunt nisi labore, placeat quo eaque.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, harum ipsa dolorum obcaecati quibusdam sequi iste maxime culpa. Doloremque corrupti ipsa mollitia laboriosam, vero nesciunt nisi labore, placeat quo eaque.
    </p>
  </div>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/stooderrr/a-pen-by-matt-studdert-ZOWRgO */
body {
  font-family: sans-serif;
  margin: 0;
  text-align: center;
}

.container {
  margin: 0 auto;
  max-width: 90%;
  width: 900px;
}

h1 {
  font-size: 3rem; 
  margin: 0;
}

.position-fixed {
  background-color: rgba(255,0,0,0.5);
  padding: 1rem 0;
}

.position-relative {
  height: 200px;
  background-color: rgba(0,255,0,0.5);
  position: relative;
/*   top: 100px; */
  width: 70%;
  margin: 0 auto;
}

.position-absolute {
  height: 80%;
  top: 10%;
  left: 10%;
  background-color: rgba(0,0,255,0.5);
  position: absolute;
  width: 80%;
}

.position-fixed:before,
.position-absolute:before,
.position-relative:before {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 0.7rem;
  font-weight: 600;
}

.position-fixed:before {
  content: "Position Fixed";
}

.position-relative:before {
  content: "Position Relative";
}

.position-absolute:before {
  content: "Position Absolute";
}

Comments