Let's learn about position.
With our hosts Jake & Finn.
What is positioning?
The position property allows you to position elements on a page. You can position elements by using the top, right, bottom, and left properties. These properties react differently depending on the type of position you use, as well as the combination in which you use them.
A parent element is an element that contains one or more child elements.
All elements that are contained within a parent element are considered child elements.
Static Position is the default position. It shows up according to the normal flow of the page. You typically do not declare this property.
Absolute Position is position relative to to it's parent element. If it does not have a parent element it defaults to the block.
Relative Position is positioned according to the normal flow of the page. It can be positioned using the top, right, bottom, and left properties.
Fixed Position is positioned relative to your browser window. Scrolling does not move it from its position.
Static + Static: Normally you would not declare a static property. The above illustration demonstrate the behaviour of a parent and child's element whose position is both set to static.
Relative + Absolute: When a parent element is set to relative and contains an absolute positioned child, we can use the top, right, bottom, and left properties to manipulate the child element within the bounds of the parent element easily.
Z-Index: If you look at the previous illustrations Jake is standing in front of Finn. With the z-index property we can move elements forward or backwards on a virtual plane. In this instance with moved Jake behind Find by setting Finn's z-index property higher than Jake's.