Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.

Image by CreativeMagic from pixabay

Place HTML Elements Absolutely with CSS

Jan 26, 2021

Use a combination of position relative and absolute to place text on the image (cute cat included) card.

CSS

Position relative is used on .container class to place content relatively to it.
Position absolute is used on .title class with top, left, and transform properties.
More about centering on CSS-TRICKS.
More about positions in CSS on w3schools.

HTML

First, we wrap everything with div class="container".
Then, we render our cute cat image with <img src.../>.
Lastly, h2 has a .title class which is positioned absolutely.
The above h2 element will look for the closest container that has a relative or absolute position which is our div with .container class and position absolutely to it.

Understanding CSS positions is a crucial aspect to succeed in creating application layouts.
Transforms can be useful for centering content vertically or horizontally.
Never skip your CSS day as it'll hit you earlier than you think. 😅

Code real-world projects based on Figma designs.

spread the word

Did you like this post? Share it with the world! 🌐