CSS Position

by Chad Drummond

HTML

<div class="modal fullscreen">
  <div class="header">
    Hi there!
  </div>
  <div class="body">
    Please enter your username:
    <input type="text" value="" placeholder="User Name">
  </div>
  <div class="footer">
    <button>Login</button>
  </div>
</div>

<div class="modal">
  <div class="header">
    Hi there!
  </div>
  <div class="body">
    Please enter your username:
  </div>
  <div class="footer">
    <button>Login</button>
  </div>
</div>

CSS

/*
 postition: 
 ========
 static -- Default
 relative -- relative to where it lands on the page
 absolute -- base of previous "position"
 fixed -- base of viewport
 
 top:
 left:
 right:
 bottom:
 
 z-index: 
*/

body { margin: 0 }

.modal {
  margin: 0 auto;
  width: 50%;
  background: green;
}

.modal + .modal {
  background: red;
  padding-bottom: 1000px;
}

.fullscreen {
  position: absolute;
  top: 10%;
  width: 80vw;
  height: 80vh;
  z-index: 10;
}

input[type="text"] {
  position: relative;
  top: 20px;
}

.fullscreen .footer {
  position: absolute;
  bottom: 20px;
  right: 20px;
}