fightingtheboss/positioning.html

## positioning.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS Positioning &amp; Display</title>

    <style>
      html {
        box-sizing: border-box;
      }

      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 1.1;
        height: 2000px;
      }

      h1 {
        margin: 0;
        padding: 1em;
        color: #fff;
        background-color: #000;
      }

      .container {
        position: relative;
        width: 75%;
        margin: 25% auto;
        border: 3px dashed black;
      }

      .display {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid brown;

        font-size: 20px;
        background-color: orange;
      }

      .float {
        padding: 10px;
        border: 1px solid grey;

        font-size: 20px;
        color: white;
        background-color: purple;
      }

      .block {
        width: 150px;
        height: 150px;
        color: white;
      }

      .red {
        background-color: red;
      }

      .blue {
        background-color: blue;
      }

      .green {
        background-color: green;
      }

      .purple {
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Display</h1>
      <div class="display">1</div>
      <div class="display">2</div>
      <div class="display">3</div>
      <div class="display">4</div>
      <div class="display">5</div>
    </div>

    <div class="container">
      <h1>Position</h1>

      <div class="block red relative">
        RELATIVE
        <span class="purple">I'm positioned absolutely!</span>
      </div>

      <div class="block blue absolute">
        ABSOLUTE
      </div>

      <div class="block green fixed">
        FIXED
      </div>
    </div>

    <div class="container">
      <h1>Float</h1>
      <div class="float">1</div>
      <div class="float">2</div>
      <div class="float">3</div>
      <div class="float">4</div>
      <div class="float">5</div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CSS Positioning & Display</title>

	<style>
	html {
	box-sizing: border-box;
	}

	*,
	*:before,
	*:after {
	box-sizing: inherit;
	}

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.1;
	height: 2000px;
	}

	h1 {
	margin: 0;
	padding: 1em;
	color: #fff;
	background-color: #000;
	}

	.container {
	position: relative;
	width: 75%;
	margin: 25% auto;
	border: 3px dashed black;
	}

	.display {
	margin: 10px 0;
	padding: 10px;
	border: 1px solid brown;

	font-size: 20px;
	background-color: orange;
	}

	.float {
	padding: 10px;
	border: 1px solid grey;

	font-size: 20px;
	color: white;
	background-color: purple;
	}

	.block {
	width: 150px;
	height: 150px;
	color: white;
	}

	.red {
	background-color: red;
	}

	.blue {
	background-color: blue;
	}

	.green {
	background-color: green;
	}

	.purple {
	background-color: purple;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>Display</h1>
	<div class="display">1</div>
	<div class="display">2</div>
	<div class="display">3</div>
	<div class="display">4</div>
	<div class="display">5</div>
	</div>

	<div class="container">
	<h1>Position</h1>

	<div class="block red relative">
	RELATIVE
	<span class="purple">I'm positioned absolutely!</span>
	</div>

	<div class="block blue absolute">
	ABSOLUTE
	</div>

	<div class="block green fixed">
	FIXED
	</div>
	</div>

	<div class="container">
	<h1>Float</h1>
	<div class="float">1</div>
	<div class="float">2</div>
	<div class="float">3</div>
	<div class="float">4</div>
	<div class="float">5</div>
	</div>
	</body>
	</html>