Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Discover Mentorship
The above is an affiliate link, if you buy the book I'll get a small commission at no extra charge to you.
Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
The above is an affiliate link, if you buy the book I'll get a small commission at no extra charge to you.
Home/Pills/ Pill - Place HTML Elements Absolutely with CSS/
Home/Pills/Pill - Place HTML Elements .../
Image by CreativeMagic from pixabay

Place HTML Elements Absolutely with CSS

Jan 26, 2021

DESCRIPTION

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

Preview

Combination of positions

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.

Summary

  • 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. 😅
THE GUIDE TO BEAT FRONTEND INTERVIEW
From time to time, I'll send you messages about new blog posts, knowledge pills, and mentoring promotions. Only valuable information, no spam included. You can unsubscribe at any time.
slack
Let's build a community that will help each other.
spread the word
You don't need to, it's okay...