Question

I need to have my navigation bar positioned over my header image.
I cannot use the background url property in CSS as I have multiple navigation bars and header images for different pages. I would like the navigation to be floated right so it is offset to the image, but partly over the image.

            Button 1 | Button 2 | Button 3 | Button 4
Header Image

I have tried many ways for example placing them same div and using CSS position absolute on the image. This cases the navigation to stop working. When I use position absolute on the navigation I cannot move the navigation far enough to the right (right: 200px) cannot move anymore!
Does anyone know how to achieve the desired result as described above? Thanks in advance!
HTML PHP

<div id="navigation-container">

 <nav id="np-access" role="navigation">
   <?php if ( (is_page(20) || is_page(22) || is_page(24) || is_page(26) ||    is_page(28)) ) { 
        wp_nav_menu( array( 'theme_location' => 'third') );
   }else{
        wp_nav_menu( array( 'theme_location' => 'secondary') );
   }
?>
 </nav>
</div>

<?php if ( (is_page(20) || is_page(22) || is_page(24) || is_page(26) || is_page(28)) )    { 
    echo '<img src="<path ito image" width="194" height="166"/>';
}
else{
   echo '<img src="<path ito image" width="194" height="166"/>';
}
?>

At the moment the image is not styled as it is in the position I require.

Navigation CSS

#np-wedding-nav{
  float: right;
  padding-right: 100px;
  height: 40px;
  position: relative;
}

Answer 1

I would like the navigation to be floated right so it is offset to the image, but partly over the image.

Give the navigation a negative margin:

nav {margin-left: -100px}

Or position is relatively:

nav {position: relative; left: -100px}

In any case: change the order of both the navigation and the image in the markup.