Cacher is the code snippet organizer for pro developers

CSS includes properties that change how a browser positions elements. These properties specify where an element is located on a page, if the element can share lines with other elements, and other related attributes.

Block-level elements create a block the full width of their parent elements, and they prevent other elements from appearing in the same horizontal space. Block-level elements also consistently appear on the left side of the browser. This is the default position for block-level elements.

The default position of an element can be changed by setting its position property. The position property can take one of four values:

• Static (default) (does not need to be specified)
• Relative: position the element relative to the default static position, using offset properties (top / bottom / left / right)
• Absolute: all other elements will ignore the element and act like it is not present on the page. Will be positioned relative to its closest positioned parent element.
• Fixed: specific position on the page (regardless of user scrolling!).

The z-index controls how far "back" or how far "forward" an element should appear on the web page when elements overlap (does not work on static elements). This can be thought of the depth of elements, with deeper elements appearing behind shallower elements. The z-index property accepts integer values. Depending on their values, the integers instruct the browser on the order in which elements should be displayed on the web page.

Display value: dictates if element can share horizontal space with other elements. Some elements fill the entire browser from left to right regardless of the size of their content. Other elements only take up as much horizontal space as their content requires and can be directly next to other elements. -Inline: 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. The height and width of these elements cannot be specified in the CSS document. (Default: , , ). Can share lines with other elements. -Block-level elements: are not displayed in same line as the content around them. These elements fill the entire width of the page by default, but their width property can also be set. Unless otherwise specified, they are the height necessary to accommodate their content. (Default: heading elements,

,

Float: moving an element as far left/right as possible on the page. Works for static & relative positioned elements. Must have a width specified, otherwise the element will assume full width and changing the float value will not yield any visible results.

• Left: float elements as far left.
• Right: float elements as far right. 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: left side of 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.