# Layering problem

**URL:** <https://forum.kirupa.com/t/layering-problem/262329>\
**Category:** web dev\
**Created:** [June 5, 2008, 2:59am UTC](https://forum.kirupa.com/t/layering-problem/262329 "2008-06-05T02:59:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![irishcash33](https://avatars.discourse-cdn.com/v4/letter/i/958977/32.png) [@irishcash33](https://forum.kirupa.com/u/irishcash33)\
**Post date:** [June 5, 2008, 2:59am UTC](https://forum.kirupa.com/t/layering-problem/262329/1 "2008-06-05T02:59:36Z")

</div>

Hi Guys,  
I have tried everything I know to fix this problem. I am trying to get the logo above the nav bar…z-index doesn’t seem to be working. Logo is in the header and nav is in menu. Any ideas?

```auto
#container {
    width: 826px;
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-color: #FFFFFF;
    background-image: url(bg.jpg);
    height: 1022px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    z-index: 1;
    position: relative;
}
#header {
    height: 184px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 50px;
    left: 0px;
    z-index: 3;
    background-repeat: no-repeat;
    visibility: visible;
    position: relative;
}
#menu
{
    width: 776px;
    height: 63px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    position: relative;
    right: 20px;
    background-image: url(menu.jpg);
    background-repeat: repeat-x;
    z-index: 2;
    bottom: 90px;
}

```

```auto
<div id="container">
<div id="header"><img src="logo.png" alt="" width="219" height="184" />
  <div id="menu">
           <a class="active" title="Home" href="#">Home</a>
        <a title="Shirts" href="#">Shirts</a>
        <a title="Ties" href="#">Ties</a>
        <a title="Contact" href="#">Contact Us</a> </div></div>

```

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [June 5, 2008, 4:00am UTC](https://forum.kirupa.com/t/layering-problem/262329/2 "2008-06-05T04:00:40Z")

</div>

Link please! (-:

---

<div class="post-metadata">

**Author:** ![Syous](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@Syous](https://forum.kirupa.com/u/Syous)\
**Post date:** [June 5, 2008, 4:13am UTC](https://forum.kirupa.com/t/layering-problem/262329/3 "2008-06-05T04:13:44Z")

</div>

Try making positions absolute?

---

<div class="post-metadata">

**Author:** ![irishcash33](https://avatars.discourse-cdn.com/v4/letter/i/958977/32.png) [@irishcash33](https://forum.kirupa.com/u/irishcash33)\
**Post date:** [June 5, 2008, 1:28pm UTC](https://forum.kirupa.com/t/layering-problem/262329/4 "2008-06-05T13:28:17Z")

</div>

Here is the link to the page

[page](http://www.clashgraphicdesign.com/site/index%201.html)