positon：
1.static - the default value (it does not need to be specified)
2.relative ： This value allows you to position an element relative to its default static position on the web page.
3.absolute：When an element's position is set to absolute all other elements on the page will ignore the element and act like it is not present on the page.
4.fixed:We can fix an element to a specific position on the page (regardless of user scrolling) by setting its position to fixed.
5.Z-Index:controls how far "back" or how far "forward" an element should appear on the web page.

Display:
1.inline:Inline elements have a box that wraps tightly around their content, only taking up the amount of space necessary to display their content and not requiring a new line after each element.
2.Block:These elements fill the entire width of the page and, unless specified, are the height necessary to accommodate the content inside of them.
3.Inline-Block:elements can appear next to each other and we can specify their dimensions using the width and height properties. Images are the best example of default inline-block

Float:
If you're simply interested in moving an element as far left or as far right as possible on the page, you can use the float property.This works for static and relative positioned elements.Floated elements must have a width specified, as in the example above. Otherwise, the element will assume the full width of its containing element, and changing the float value will not yield any visible results.

Clear:
The clear property specifies how elements should behave when they bump into each other on the page. It can take on one of the following values:
left — the left side of the element will not touch any other element within the same containing element.
right — the right side of the element will not touch any other element within the same containing element.
both — neither side of the element will touch any other element within the same containing element.
none — the element can touch either side.