Lesson 7: Positioning

Overview

This lesson demonstrates how to position HTML elements via the position property. There are five different values for the position property: static, absolute, relative, fixed, and sticky. This lesson will examine how each of these positioning methods functions.

Static Positioning

Static positioning is the default method. So, if no position value is specific, it is the equivalent of specifying static. Either way, static elements are placed left to right and top to bottom inside the parent element as you can see in the example below. When an element can no longer be placed to the right of the previous one, because it does not fit into the parent element, it is placed one level down at the far left. Elements are placed in rows this way, and the bottom of each element in the row is aligned with the longest element. The margin, padding, and border are taken into consideration when determining the size of an element.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px gray solid; width:400px; height:1000px;">
    <img style="margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="EcceAgnusDei_AlbertChevallierTayler.png" />
    <img style="margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="AnAngelComfortingJesus_CarlBloch.png" />
    <img style="margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="DivineMercy_EugeniuszKazimirowski.png" />
    <img style="margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheMayFlowerCompact_JeanLeonGeromeFerris.png" />
  </body>
</html>

Output

Absolute Positioning

We designate absolutely positioned elements by setting the position property value to the absolute, as shown in the image elements below. Absolutely positioned elements are placed based on the values of their top and left properties, without regard to the size of the element. This means that they can overlap, unlike static elements. This example demonstrates this. Note that absolutely positioned elements are placed relative to the closest containing element that is absolutely positioned. Since the body element is not absolutely positioned in this example, the absolutely positioned image elements are positioned with respect to the entire document, that is, the upper-left corner of the document window. Notice also that the margin is included. That is why there is a 5 pixel space for element at position (0, 0).

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px gray solid; width:400px; height:1000px;">
    <img style="position:absolute; left:0px; top:0px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="EcceAgnusDei_AlbertChevallierTayler.png" />
    <img style="position:absolute; left:10px; top:100px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="AnAngelComfortingJesus_CarlBloch.png" />
    <img style="position:absolute; left:20px; top:20px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="DivineMercy_EugeniuszKazimirowski.png" />
    <img style="position:absolute; left:50px; top:50px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheMayFlowerCompact_JeanLeonGeromeFerris.png" />
  </body>
</html>

Output

Relative Positioning

Relative positioning is designated by setting the position property value to relative, as show in the image elements below. This example is exactly the same as the absolutely positioned example, with the exception that the position property value has been changed to relative. Relative positioning places elements just as is they were static. However, it then offsets their positions by the values specified via the left and top properties.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px gray solid; width:400px; height:1000px;">
    <img style="position:relative; left:0px; top:0px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="EcceAgnusDei_AlbertChevallierTayler.png" />
    <img style="position:relative; left:10px; top:100px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="AnAngelComfortingJesus_CarlBloch.png" />
    <img style="position:relative; left:20px; top:20px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="DivineMercy_EugeniuszKazimirowski.png" />
    <img style="position:relative; left:50px; top:50px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheMayFlowerCompact_JeanLeonGeromeFerris.png" />
  </body>
</html>

Output

Fixed Positioning

This example sets the position property value to fixed. Otherwise, it is exactly the same as the last two examples. Fixed positioning places the elements in exactly the same position as absolute. However, unlike absolute positioning, the fixed elements remain in place when he document is scrolled up of down.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px gray solid; width:400px; height:1000px;">
    <img style="position:fixed; left:0px; top:0px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="EcceAgnusDei_AlbertChevallierTayler.png" />
    <img style="position:fixed; left:10px; top:100px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="AnAngelComfortingJesus_CarlBloch.png" />
    <img style="position:fixed; left:20px; top:20px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="DivineMercy_EugeniuszKazimirowski.png" />
    <img style="position:fixed; left:50px; top:50px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheMayFlowerCompact_JeanLeonGeromeFerris.png" />
  </body>
</html>

Output

Sticky Positioning

In the final example, the position values are set to sticky, but otherwise everything is the same as the last four examples. Sticky positioning places elements much relative positioning. However, as the document is scrolled up the elements stop or stick at a fixed position in the document window, as though their position value was set to fixed.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px gray solid; width:400px; height:1000px;">
    <img style="position:sticky; left:0px; top:0px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="EcceAgnusDei_AlbertChevallierTayler.png" />
    <img style="position:sticky; left:10px; top:100px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="AnAngelComfortingJesus_CarlBloch.png" />
    <img style="position:sticky; left:20px; top:20px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="DivineMercy_EugeniuszKazimirowski.png" />
    <img style="position:sticky; left:50px; top:50px;
      margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheMayFlowerCompact_JeanLeonGeromeFerris.png" />
  </body>
</html>