Positioning Examples

Here are some of the most common use cases for positioning. Although it may seem tempting to use positioning for creating layouts and position elements on the page, it is not a scalable or responsive solution, hence is not recommended.

Position Absolute and Relative - Text overlay Image

• Adding position: absolute; to the h1 will place it on top of the image
• Once the position is set the h1 will loose its width so we can set it to width: 100%;
• Adding the top: 40% value will move the heading by 40% from the top of the body tag
• To keep the heading inside the .container we can add position:relative; to the .container

Few other styles to consider:

• Adding a translucent background to the heading
• Adding with:100% to the image
• Adding max-width:500px; to the .container so it does not go over 500px
• Centring the container on the page using margin: 0 auto;

Position Fixed - Back to Top

A common use of the position fixed is when we show a back-top top on-page link which will bring us to the top of the page.

Here is the codepen with just the on-page link

Now adding the position:fixed; with bottom and right position values to the anchor tag with class top-link