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!

1div.example {
2  position: static;
3}
4
5div.example {
6  position: relative;
7}
8
9div.example {
10  position: absolute;
11}
12
13div.example {
14  position: fixed;
15}
16
17div.example {
18  position: sticky;
19}
20

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

1div.example {
2  display: none;
3}
4
5div.example {
6  display: block;
7}
8
9div.example {
10  display: inline;
11}
12
13div.example {
14  display: inline-block;
15}

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):

1div.example1 {
2/* both examples below will overlap this example */
3  position: absolute;
4  top: 0;
5  z-index: 1;
6}
7
8div.example2 {
9/* this will overlap example1 only */
10  position: absolute;
11  top: 0
12  z-index: 10;
13}
14
15div.example3 {
16/* this will overlap both example1 and example2 */
17  position: absolute;
18  top: 0;
19  z-index: 100;
20}

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:

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

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

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

Clear

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

1<div>
2  <p>Some text</p>
3  <img style="float: left" src="...">
4  <p style="clear: both">Some more text</p>
5</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!)