fixed div hiding behind other div when scrolling

Question

I set this div as two small flags to choose the language of the page. They are fixed (sticky) on top right of the screen. Problem is when I scroll, because they hide behind other elements such as images or background colors. How to make them not hide anymore? I tried setting parent class as 'navbar' and somehow it works, but the elements wrap up when screen shrinks.

#flags {
  position: fixed;  	
}

<div style=" float: right; width: 100px; margin-top: 60px;">
  <div id="flags">
    <span>
      <a href="default.html">
        <img  id="uk" src="images/uk.png">
    </span></a>
    <span><a href="default_ita.html">
      <img  id="uk" src="images/italy.png">
    </span></a>
  </div>
</div>

Answer 1

Here you go with a solution using z-index

Provide the highest z-index to the element which you want to view all the time, condition the element should have position fixed

#flags {
  position: fixed;
  z-index:9999  	
}

<div style=" float: right; width: 100px; margin-top: 60px;">
  <div id="flags">
    <span>
      <a href="default.html">
        <img  id="uk" src="images/uk.png">
      </a>
    </span>
    <span>
      <a href="default_ita.html">
        <img  id="uk" src="images/italy.png">
      </a>
    </span>
  </div>
</div>

Note: Please have a look in the closing tags as well span tag got closed before anchor tag

Hope this will help you.