Code Editor
Web Browser
Learn

Take a look at the block-level elements in the image below:

The boxes in the image above were created with the following CSS:

.boxes { width: 120px; height: 70px; }

Notice the block-level elements in the image above take up their own line of space and therefore don't overlap each other. In the browser to the right you can see block-level elements also consistently appear on the left side of the browser. This is the default position for block-level elements.

The default position of an element can be changed by setting its position property. The position property can take one of four values:

  1. static - the default value (it does not need to be specified)
  2. relative
  3. absolute
  4. fixed

In the next few exercises, you'll learn about the values in items 2, 3, and 4 above. For now, it's important to understand that if you favor the default position of an HTML element, you don't need to set its position property.

Report a Bug
If you see a bug or any other issue with this page, please report it here.