Sara Sara - 3 months ago 23
HTML Question

Absolute positioning of element in responsive header

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.

#wrapper {
position: relative;
display: inline;
}
#questionMark {
position:absolute;
left:33%;
top:-43%;
max-width: 10%;
}


This is my fiddle: https://jsfiddle.net/8obzf2c8/2/

Answer

Your wrapper has property display: inline; so it behave like a fe. span element, it is not a block.

Change 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.