I'm learning CSS and looking at this example:
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center
I don't understand why when I remove "position:relative" for the parent div, it effects the text inside.
As I understand position relative makes the html element you apply it to be positioned relative to it's original. But here they haven't set any properties except position relative so why is it needed?
Because, the position of the center div is absolute with left: 0 and top: 50% of the whole screen, unless you put it inside a parent with a relative position, it becomes left: 0 and top: 50% of that parent
.container div is the first parent of .center div the second parent is the body tag then the html tag. the tag that has relative position becomes the parent of .center div who has position absolute.
the relative position will let the text position according to its parent element. in order to position it with respect to the parent div or element in this case it is image. you need it to be positioned relative by that css tag position with value as relative.
