Relative and absolute position?

HTML-CSS
1

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???

2

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 )^^

3

doesn’t seem to be working…

5

  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?