CSS layout properties

On this page, we will review some CSS layout properties that help us arrange HTML objects as they appear on a browser:

• position
• display
• z-index
• float
• clear

Position

The position property determines where and how an element appears on the entirety of the page, and can take on the following values:

• static
  • the default position, i.e. after the last element
• relative
  • positions the element relative to its static positioning
  • does not affect the positioning of other elements
  • used in conjunction with top, bottom, left and right co-properties
    • each will have a 0 value by default (and when not mentioned)
• absolute
  • positions the element relative to its parent element
  • does not affect the positioning of other elements
  • used in conjunction with top, bottom, left and right co-properties
    • each will have a 0 value by default (and when not mentioned)
• fixed
  • positions the element relative to the viewport
• sticky
  • positions the element relative to the document until the user scrolls past a specified threshold
    • e.g. if we have top: 200px on a sticky element, then the sticky element will stop scrolling upwards, once it reaches 200 pixels from the top of the document!

div.example {
  position: static;
}

div.example {
  position: relative;
}

div.example {
  position: absolute;
}

div.example {
  position: fixed;
}

div.example {
  position: sticky;
}

Display

The display property determines if and how an element appears relative to its preceding (sibling) element, and can take on the following values:

• none
  • the element disappears rather than take up space
  • this differs from visibility: hidden (which shows a blank space)
• block
  • the element appears as it should on its own new line
• inline
  • the element appears on the same line as its preceding element
• inline-block
  • the element appears on the same line as its preceding element
  • it appears on a new line when necessary

div.example {
  display: none;
}

div.example {
  display: block;
}

div.example {
  display: inline;
}

div.example {
  display: inline-block;
}

Z-index

The z-index property allows an element to overlap another element, if the element has a position value of absolute, fixed or sticky (the higher the z-index value, the more "on top" the element will become):

div.example1 {
/* both examples below will overlap this example */
  position: absolute;
  top: 0;
  z-index: 1;
}

div.example2 {
/* this will overlap example1 only */
  position: absolute;
  top: 0
  z-index: 10;
}

div.example3 {
/* this will overlap both example1 and example2 */
  position: absolute;
  top: 0;
  z-index: 100;
}

Float

The float property ensures that the element will appear beside rather than below its preceding sibling element, and can take on the following values:

• none
  • the default value with which the element will appear according to its position in the DOM
• left
  • the element will appear beside its preceding element, to the left
• right
  • the element will appear beside its subsequent element, to the right

For example, a float of left for an image will result in the image appearing to the left of the paragraph, despite its position in the DOM:

<div>
  <p>Some text</p>
  <img style="float: left" src="..." />
</div>

However, a float of right for an image will result in the image appearing to the right of the text:

<div>
  <img style="float: right" src="..." />
  <p>Some text</p>
</div>

Clear

The clear property specifies what should happen when the next element appears after an element with float:

<div>
  <p>Some text</p>
  <img style="float: left" src="...">
  <p style="clear: both">Some more text</p>
</div>

The second paragraph would appear on a new line under the first paragraph and image (the image would appear to the left of the first paragraph!)