Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the position property.
An absolute position takes the element out of that top-down document flow and allows you to adjust it relative to its container.
The z-index property is used to create "layers" for your HTML elements. If you are familiar with image editing tools, you may have worked with layers before. This is a similar concept.
Elements with a higher z-index value will appear to be layered on top of elements with a lower z-index value. This can be combined with the positioning in the previous lesson to create unique effects.
The i element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for italic text, such as scientific terms, or for icons like those provided by FontAwesome.
This special class is how FontAwesome determines which icon to load. fas indicates the category of icons (FontAwesome Solid, here), while fa-music selects the specific icon. icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size
About
Taken from Freecodecamp responsive web design certification #me and freecodecamp