CSS Layout reference

CSS Layout: properties

Property	Description
float:	Can move elements as far left or far right as possible on a webpage. Can also be used to wrap text around an image for example.
clear:	Can clear an elements left side, right side or both. Is used for example when its wished that the next element needs to go below and not to the right or left.
position:	Allows for specification of element placement
z-index:	Specifies how far back or how far in front an element will be viewed. Can be used for example in cases where an image needs to be behind text or other cases.
display:	Specifies how an element is displayed or if its displayed at all.

Value	Description of value
relative	Sets an elements placement to where it usually would be in context of the whole body. So it from there can be modified. Can be viewed as a standard position.
absolute	Sets an elements placement to where it usually would be within its parent container. For example a h1 absolute in a div container would be viewed relative to the div container and not relative to the whole website.
fixed	Sets an elements placement to a fixed part of a webpage. It will remain in the same place no matter what. Its the equivalent of sticking something up on a board. It will stay in the same place.
sticky	A mix between static and relative. A sticky element will remain relative until the user reaches a certain scroll position. Whereafter the element will remain static until another certain scroll position is met. Then the element will toggle back to relative?.
inline	elements with inline values. Dont start on a new line and take up as little space as possibl. Their width and height cant be manually adjusted.
block	Start on a new line and takes up the full width available. (Streches left and right as far as it can.). They can also have manually adjusted heights.
inline-block	Can have a manually adjusted height and width. Does not add a line break so can be viewed next to other elements and doesnt take up their entire container width.