I'm trying to get exactly the same effect as here: Responsive images positioned over image , so I want my absolute positioned elements to stay in the same place but get smaller or bigger when the browser is being sized. I tried many different possibilites, before I worked with this code, but I don't understand why my wrapping container (id="wrapper") is placed under the image. And to get the question mark on the image I would need to use minus percentage. In the example I copied from another question in stackoverflow there are bootstrap styles. I don't know and I don't want to use bootstrap though. I will be very grateful for all suggiestions what I'm doing wrong.
Your wrapper has property
display: inline; so it behave like a fe.
span element, it is not a block.
display: inline; to
display: inline-block; so the wrapper behaves like inline container. You will also need to change this weird
top: -43%; to fe.
top: 43% as things will get more normal and predictable.