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
andright
co-propertieseach 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
andright
co-propertieseach 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!
(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 thatdisplay: 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!
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:
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:
This will result in the image appearing to the right of the text, despite its position in the DOM:
Clear
The clear
property specifies what should happen when the next element appears after an element with float
In the example above, the second paragraph would appear on a new line under the first paragraph and image!
Last updated