Relative and absolute position?

Since I set the parent element (header) with position as relative, shouldn’t the child element (.hero-text-box) with position as absolute be moving inside the parent element box area? Why’s the child element text going outside the parent element boundary???

Just a fast reply: nope :stuck_out_tongue: If you want the inner element to be positioned relatively to the outer element you should give the inner element the attribute position: relative, while the outer element must be a ‘positioned’ element ( giving it a position: relative aswell will work)^^ The absolute elements will be shred out of the flow ( which means the other elements won’t be considered )^^

doesn’t seem to be working…

In your code, the parent is the header element and the child is the div with class=“hero-text-box”. You gave a fixed width to the child and gave the child an absolute position of left: 50%; This causes the child to start at 50% of the header element which it is doing. Remove the fixed width of the child div and the text will not go beyond the edge of the screen (page).

I assume your goal here is to center the child vertically and horizontally within the header. If that is the case, you could add the following line to your .hero-text-box:

transform: translate(-50%, -50%);
  1. thank you, it seems to be working that way, but when I say left:50%, I guess it’s 50% in relative to the parent since I set parent as relative. So if I take out the relative position off parent, the left:50% will be relative to the whole screen right?

  2. what’s the benefit of using transform: translate(-50%, -50%); instead of others?

Try it out and see.

What others?