Common Display Properties

display: in-line;

Inline items do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space

we are inline items

display: block;

this is a block display. it takes up this entire block of space. no sharing
This format provides line breaks both before and after the element when in the normal flow.
In other words it gets its own line and takes up the entire space

display: none;

this entire block can be removed from the page and hidden with display: none;
Simply check this rule in the developer tools or un-comment the "display: none;" line in the css

POSITIONING ELEMENTS

position: static;

This uses static positioning. This means that the element cannot be repositioned. Its position is dictated by the flow of the document. Where it is is where it is.

position: relative;

Relative positioning means the element will be positioned in relation to its natural position within the document.
You can use top/bottom/left/right CSS rules to move an item all around.
Notice this container is 50% from the left and -50px from the top (meaning this goes above its natural place in the document)

position: fixed;

THE FIXED EXAMPLE IS AT THE

BOTTOM RIGHT

Fixed content is pinned to a coordinate on the view window. So if you give a fixed element a bottom of -10px then that item will always be pinned to the bottom view with 10px of the content just below the view window

this is fixed to one position

position: sticky;

This is commonly used for navigation menus but can be used anywhere an item needs to stick. Notice the difference in behavior between sticky and fixed. Sticky items scroll/flow into their position whereas fixed items are always pinned to their position.

This will stick to the given position once it reaches it. Notice how this element scrolls in and then sticks once it reaches the location specified in the CSS.

position: absolute;

Absolute Positioning within a Container

Use the CSS rules for "child" to see how absolute positioning removes an element from the flow and pins it to a pixel coordinate. There are extra rules written to demonstrate where the box can be placed.

box

More text :D

Absolute Positioning with No Parent Container

If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. It is positioned within the initial view window. Therefore bottom: 0px; is not the bottom of the

This item has position: absolute; with no parent element with any position rules. Go to section

JUMP TO ABSOLUTE POSITION WITH NO POSITIONED PARENT

Realistic Use Case of Absolute Positioning

Absolute positioning is usually used for artistic purposes. Such as overlapping objects for visual appeal. It is not however recommended to use for entire page layouts. Doing so will pin elements to pixel coordinates on the screen. Therefore on smaller screens your content will get cut off and not resize.

Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur nostrum quo est consequuntur, officia, ullam rem quae dolor libero animi rerum perspiciatis. Nam quo, exercitationem voluptas labore veniam nihil voluptatem.