📍CSS layout properties

determining how we arrange something on screen

Five main CSS properties that determine the arrangement of layouts on a webpage:

• position

• display

• z-index (overlap)

• 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 0 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 0 by default (and when not mentioned)

• fixed

  • positions the element relative to the screen or 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 | relative | absolute | fixed | sticky
}

(In the above, the property position could take on one of those five values)

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

  • this differs from visibility: hidden in that display: none does not take up 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, regardless

• inline-block

  • the element appears on the same line as its preceding element, but allows it to appear on a new line when necessary

There also exist newer values such as flex and grid which will have their own pages further on in this book!

div.example {
    display: none | block | inline | inline-block;    
}

Z-index (overlap)

The z-index property allows an element to overlap another element if it has a position value of absolute, fixed or sticky : the higher the z-index number (an integer), 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; the element will appear accordingly 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

This will result in the image appearing to the left of the text, despite its position in the DOM:

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

This will result in the image appearing to the right of the text, despite its position in the DOM:

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

In the example above, the second paragraph would appear on a new line under the first paragraph and image!