Position property for hero image and text

HTML-CSS
1

I came across the codes below from w3schools for hero image and text:

I don’t understand why they use these position properties for hero image and text:

.hero-image {
  position: relative;
}

.hero-text {
  position: absolute;
}

I wanted to try this and added these codes to my pen: https://codepen.io/turchan/pen/VwjBaEZ

I played with the codes and notice if I delete these properties, the result looks messed up.

I also tried to move the hero text to the right bottom by modifying the top and left:

.hero-text {
  top: 60%;
  left: 80%;

then when I make the screen browser small, there is this white extra room on the right and some of the texts get hidden.

How come? How to change the position of the text without having this issue?

2

Hi @mkobayashi0801. The same hero image and text effect can be achieved using flexbox.

For that, add these flexbox properties to the .hero-image container:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

Don’t forget to remove the position: relative; also!

After that, remove these properties from the .hero-text:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Now, if you want to change the position of the text, you can adjust it with margins, padding etc.

1 Like
3

@paulsonstech

Wow, I did as you said and it looks perfect now!! Thank you so much!! I feel using flexbox properties is less confusing to me. The position properties are giving me a headache… lol Thanks again! :hugs:

4

Glad to hear that! When people create hero images and text, the most common way to do it is using the flexbox itself. That’s why I suggested it.

1 Like
5

Ah I didn’t know that. Now I know and I can start using that for my other pens! Thank you! @paulsonstech :raised_hands: