Title: CSS Layering
Last modified: August 19, 2016

---

# CSS Layering

 *  Resolved [equaldesign](https://wordpress.org/support/users/equaldesign/)
 * (@equaldesign)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/css-layering/)
 * I am currently creating a site for a client in WordPress with a menu across the
   top `<div id="navbar">`. Then further down the page there is a div that has a
   negative margin to overlap it with the navar (picture of the man). However not
   that this is ‘over the top’ of the navbar I cannot click the last link (‘barney’).
 * Is there a way to send the photo of the man to the back and bring the navbar 
   to the front?
 * View the page here – [http://www.cliffbashforth.co.uk/index.php](http://www.cliffbashforth.co.uk/index.php)
 * Thanks,

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [jberghem](https://wordpress.org/support/users/jberghem/)
 * (@jberghem)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/css-layering/#post-861530)
 * Yeah use z-index in your CSS. This defines which layer it’s on top.
 * If I may be so bold to give you a tip, since you’re not using a exotic font, 
   I’d suggest to use actual text in the tab links instead of using the text in 
   the graphic. This will save you the work of having to create new or different
   graphics when you want to change the order or names of the links in the future.
   It will also save you the whole z-index trouble, because trouble it is. (z-index
   reacts very differently in the different browsers especially if they have different
   positioning)
    The actual text will be on top and you don’t risk the man being
   covered by the menu bar. In fact since there is no roll-over or active link graphic
   you could make the whole tabbed menubar just one graphic.
 * Site looks really great!
 * More info in z-index
    [http://htmldog.com/reference/cssproperties/z-index/](http://htmldog.com/reference/cssproperties/z-index/)
 *  Thread Starter [equaldesign](https://wordpress.org/support/users/equaldesign/)
 * (@equaldesign)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/css-layering/#post-861633)
 * Thanks for the reply. I have made the links across the top text however it is
   no different in that you still can’t click on the last one.
 * I have also assigned the Z index of 1 to the div with the man on and 2 to the
   navbar div but still no luck as the text and div are not clickable.
 * Any other ideas or anyone know what I am doing wrong here? Any help would be 
   greatly appreciated, thanks.
 *  Thread Starter [equaldesign](https://wordpress.org/support/users/equaldesign/)
 * (@equaldesign)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/css-layering/#post-861636)
 * I fixed it!
 * I have just didn’t add the postion of the navbar div (relative or absolute – 
   in this case relative). Once I added the position relative value in the css, 
   and gave the navba a z-index of two and the image of the man a z-index of 1 it
   worked.
 * Thanks jberghem.
 *  [jberghem](https://wordpress.org/support/users/jberghem/)
 * (@jberghem)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/css-layering/#post-861677)
 * Your welcome! (told you ’bout the positioning & z-index trouble didn’t I 😉 )

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CSS Layering’ is closed to new replies.

 * 4 replies
 * 2 participants
 * Last reply from: [jberghem](https://wordpress.org/support/users/jberghem/)
 * Last activity: [17 years, 8 months ago](https://wordpress.org/support/topic/css-layering/#post-861677)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics