title: Z-Index and Relative/Absolute Positioning
body: <p>I'm having some problems with z-index and positioning. Basically, when you hover over the menu items (home, about etc), paint splashes should load underneath the menu:</p>
  
  <p><a href="http://www.saradouglas.net/home" rel="nofollow noreferrer">http://www.saradouglas.net/home</a></p>
  
  <p><a href="http://www.saradouglas.net/wp-content/themes/sara-douglas-theme/style.css" rel="nofollow noreferrer">Stylesheet is located here</a>.</p>
  
  <p>This worked fine when each splash div was set to absolute positioning, but I realised that these would appear in different places in different screen resolutions. I thought it would just be a case of changing this to relative positioning, and then adjusting the co-ordinates accordingly. Unfortunately now my splashes don't appear under the menu, like they should.</p>
  
  <p>To clarify, I want the splashes to appear under the menu - so the menu should always appear on top of the splashes. This has only become a problem since setting the menu to relative, and these splashes to absolute.</p>
  
  <p>I'm hoping this is a simple one to fix and I'm just missing something. I'm hoping someone here can tell me where I've gone wrong and offer a solution!</p>
  
  <p>There have been some good answers submitted so far but unfortunately they have not fixed my problem. I have tried adding the menu background to the ul class rather than the div, but this has made no difference to the problem.</p>