There are four types of basic positioning properties. These properties give us a lot of control over our elements by allowing us to pick where we want to move them. Some of these elements stay within the normal flow of our HTML document, while others are taken out, allowing us to move them virtually wherever we want.
This is the default positioning property. A static property keeps your element within the normal flow of your HTML document and does not respond to top, right, bottom and left properties.
A relative positioning property works very similar to static in the sense that it will not take your element out of the normal flow of your HTML document. The biggest difference between a static and a relative positioned element is that an element that has position of relative responds to top, right, bottom and left properties.
Elements with an absolute positioning are taken out of the normal flow of your HTML document and are "attached" to the closest relative or absolute positioned parent element. With absolute positioning you can move your element wherever you want on your page using top, right, bottom and left properties.
One thing to remember about absolute is that if it is not nested within a relative or absolute positioned element it is "attached" to the document body.
An element with a fixed position is essentially anchored to a certain spot within the user's viewport. Although not common, a fixed position element can be useful. The fixed element will remain in its specified location even when the user scrolls up and down the page or resizes the browser window.
Mario will represent a parent element. A parent element contains children elements.
Bowser will represent a child element. Child elements are contained within parent elements.
Here we have our child element nested within our parent element. This ensures that the child element will be the top most layer
. All elements are positioned as static by default.
Changing the positioning type and adding left and right properties to our elements give us even more control of where we want to place them.
The egg in the top-right corner is set to a fixed position. This property allows an element to remain fixed within an area of the user's viewport.
The z-index property controls the stacking order of positioned elements, allowing them to overlap one another.
In this situation the star is behind Luigi. This is because the star has a z-index that is less than Luigi.
Tip: Think of z-index as layers, the higher the number associated with z-index, the greater priority for it to be the top-most layer.
Swapping the z-index of the elements reverses the order, putting the star on top.
Remember: Take nesting in to account when using z-index. If one element is nested within another, it can never have a higher z-index than it's parent.
Not considered one of the basic properties, the flexbox layout is a CSS3 tool that was created to improve control over elements within a container. Flexbox can be really useful when aligning or changing the direction and order of child elements within a container.
Here we have three stars that have an added display: inline-block with default positioning.
Using flexbox we can influence the behavior of our stars just by a few properties to our parent container.
By adding display: flex and justify-content: space-between we are able to display our flex items with equal spacing betwen them. When using space-between the first and last items are aligned to the edges of the parent container.
This example demonstrates justify-content: flex-end. With this property all flex-items are pushed to the end of the container.
Another nice feature of flexbox is that it gives us the ability to easily vertically align our flex items. Let's look at an example where the container has a fixed height.
Adding align-items: center and justify-content: space-between we can create something where our flex-items are vertically aligned, centered and have equal spacing around them.
Recently I made a small blog post about the advtanges and disadvantages of flexbox. Flexbox is not perfect, but it sure does give us a few simple ways to accomplish some otherwise tedious tasks.