title: Absolute positioning of element in responsive header
body: <p>I'm trying to get exactly the same effect as here: <a href="https://stackoverflow.com/questions/16363029/responsive-images-positioned-over-image">Responsive images positioned over image</a> , 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.</p>
  
  <pre><code>#wrapper {
      position: relative;
      display: inline;
  }
  #questionMark {
      position:absolute;
      left:33%;
      top:-43%;
      max-width: 10%;
  }
  </code></pre>
  
  <p>This is my fiddle: <a href="https://jsfiddle.net/8obzf2c8/2/" rel="nofollow noreferrer">https://jsfiddle.net/8obzf2c8/2/</a></p>