Basic Positioning

Designing layout is an intensive process, and is where most of your time will be spent as a dev. There are many advanced properties that will help you when creating layouts (particularly those that need to be responsive), but for now, let’s consider creating a static layout using absolute positioning.

The position property (position: ), as you may expect, allows developers to specify where the position of elements will be within the browser window.

Absolute positioning (position: absolute) sets elements absolutely, removing them from the normal flow (remember our discussion on block-level elements?). For our purposes, we can use absolute positioning and math to crudely “draw” on the page without having to do much page building.

For example, I can create a “canvas” 100px by 100px wide, and color half using a rectangle half the size of the parent, and positioned halfway across its width:

HTML
<head>
  <style>
    .canvas {
      background-color: black;
      height: 100px;
      width: 100px;
      position: absolute;
    }
    .rectangle {
      background-color: red;
      height: 100px;
      width: 50px;
      position: absolute;
      left: 50px;
    }
  </style>
</head>

<body>
  <div class="canvas">
    <div class="rectangle"></div>
  </div>
</body>

Example

Geometric Style: The following example, I created a “canvas” 300px by 300px, with 3 main elements - the sun, rainbow, and clouds. Most of these elements were positioned absolutely to the bottom and left of the canvas’ edges and the neighboring element.


Realism-ish Style: Alternatively, I placed all of my colored blocks in an additional .curved class, with the border-radius property (border-radius: ) set to a high curvature. It may look more like a rainbow, but more calculation required with this method, sizing in terms of the left, top, and right pixel values.