1. Static
This is the absolute default positioning method. The element will go to the top leftmost corner, wherever it is able to fit
This is the Example!
Document Flow:
The document flow of a website is how elements will naturally be placed on a webpage without any special positioning.
2. Relative
Positioning something with the relative property will present the element a certain amount of pixels away from it's default position. Relative positions can be moved left, right, up, or down a certain amount of units away using those properties, respectively.
3. Fixed
This will position the element relative to the Browser Window. This means it'll stay in the same place if the page is scrolled.
4. Absolute
Very similar to relative except it will not move according to the document flow, it's not anchored to any element unless specified.
5. Sticky
Sticky is a little bit complex. The position will remain in place, until the page is scrolled. Then, the element will stay in a certain place on the screen. You'll see what I mean in the example.
6. Float
!DISCLAIMER! This is somewhat outdated, this positioning is often found in very basic webpages or old webpages! Float has 2 values, left and right. You can position an element (in the normal horizontal flow of the document)
7. Flexbox
Flexbox is very similar to float, with a little bit more customization. With flexbox, you are able to control how far left or right an element will be in a document with units, it's more responsive than positioning absolutely.
8. Grid
Positioning with Grid is one of the more responsive and modern methods of web design. Positioning with grid you are able to fully customize how elements will appear on a screen by dividing the screen into a 'grid' and specifying box size, etc.
9. Z-index
Positioning with Z-index is used with elements that overlap, the Z-index determines which element will 'cover' the other. The higher the Z-index, the more priority the element is given. EX: An element with a value of Z-index: 2, will cover Z-index:1.