positioned relative to containing block (viewport)
Don’t contribute to the size of the parent
Won’t scroll with rest of the page
They can stick to side, top, bottom etc. of the browser
block elements don’t get the width of the parent
margins don’t work to keep siblings away
opposite properties can be used to size an element
absolute
Removed from the normal document flow
No space is created for element in the page layout
==positioned relative to its closest positioned ancestor OR containing block (viewport)==
Don’t contribute to the size of the parent
positioned properties top, right, bottom, left are used to position it
Size/position of sibling (brother) have no effect
Best Practice: use both horizontal and vertical property
Margins don’t work same
Opposite properties can be used to size the element
sticky
Hybrid of relative (has inline gap) and fixed positioning (doesn't scroll with other elements)
positioned according to the normal flow of the document,
When you scroll it can offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor) based on top, right, bottom, left
The offset does not affect the position of any other elements.
Types of Positioning
Positioned
anything except static (relative, absolute, fixed or sticky)
Relatively Positioned
relative
Absolutely Positioned
absolute
Stickily Positioned
sticky
Float and clear
Floated elements remain a part of the flow of the web page.
While absolutely positioned page elements are removed from the flow of the webpage.
#sidebar { float: right; /** left right none inherit **/}