Property	Explanation	Syntax	Other remarks
z-index	The z-index property permits the designation of priority to decide which elements will sit on top of others when they overlap. All positioned elements have their z-index set to auto (effectively, zero). Elements with higher integer z-index values will take precedence over those will lower ones, and will be displayed on top of the latter.	z-index: 1;	If an element has a z-index of 5, and that this is the highest value for this property compared to other elements, the effect would be no different if it had a z-index value of 2500. What would matter here is that it has the highest value.
Position: static	static positioning is the default value of the positioning property in the normal flow of a webpage. It is the positioning that the element being styled with this property would normally have non-styled.	position: static;
Position: relative	relative positioning allows one to alter the position of an element in relation to where it was in the normal flow. This can be achieved using top, bottom, left and right properties. It is possible to cause the element in question to overlap with other elements.	position: relative;	When the styled element is moved, the position of other elements will not be affected. The styled element is still considered to be in the normal flow. The top, bottom, left and right properties behave in counterintuitive fashion.
Position: absolute	absolute positioning allows for an element to be removed from the normal flow and moved elsewhere. The space where it was will not remain unoccupied, as it can happen with relative positioning. The element in question will be placed in relation to its containing element.	position: absolute;	Other elements are placed as if the styled element did not exist, since the latter is removed from the normal flow. The containing element will not necessarily be the parent element of the styled element — but it can be so if the parent element is positioned to something other than static.
Position: fixed	fixed positioning will usually fix an element in place relative to the viewport's visible portion.	position: fixed;	This positioning removes the element in question out of the normal document flow. Some tweaking may be necessary to adjacent elements so they, for example, are not hidden by the fixed element. This property can be useful for, for example, fixing a navigation bar to the top of the page so that it remains in view as users scroll down. For this positioning to work correctly, you will need to have layout properties such as top and left set.
Position: sticky	sticky positioning permits an element to move with the page as it scrolls until a certain point, at which the element will remain fixed on the page as the rest of the content continues to scroll.	position: sticky;	This positioning could, for example, have a nagivation bar move with the page up to a certain point, and thereafter remain fixed as the page continues scrolling. Use the z-index property to keep the styled element above other elements on the page if necessary.
Display: block	The display: block; property applied to an element will cause it to be a block-level element, meaning that it takes up the full width of its container, and that other elements will appear on lines before or after it.	display: block;	Such styled elements can have their width and height adjusted manually.
Display: inline	An element with a display: inline; property will take up as little space as possible and appear on the same line as other like elements.	display: inline;	Such styled elements cannot have their width and height adjusted manually.
Display: inline-block	Like inline elements, ones with the display: inline-block; property will appear on the same line as other like elements.	display: inline-block;	A distinction for elements styled this way is that their height and width can be adjusted.
Float	The float property permits the placement of an element to the left or right of its container.	float: left; float: right;	A floated element is taken out of normal document flow, and content underneath it moves up to the place where it was. This property can also be used to wrap text around an image, or to place elements side by side.
Clear	The clear property makes it possible to move the styled element below elements that are floated to the right, to the left, or both types.	clear: left; clear: right; clear: both;