# Div on top of another - z-index?

**URL:** <https://forum.kirupa.com/t/div-on-top-of-another-z-index/320435>\
**Category:** web dev\
**Created:** [March 23, 2011, 12:08pm UTC](https://forum.kirupa.com/t/div-on-top-of-another-z-index/320435 "2011-03-23T12:08:30Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![nnnniiiicccc](https://avatars.discourse-cdn.com/v4/letter/n/49beb7/32.png) [@nnnniiiicccc](https://forum.kirupa.com/u/nnnniiiicccc)\
**Post date:** [March 23, 2011, 12:08pm UTC](https://forum.kirupa.com/t/div-on-top-of-another-z-index/320435/1 "2011-03-23T12:08:30Z")

</div>

Hi

I have 2 divs… DIV #wave is set to 100% width… DIV #wavewhite is set to 980px width with auto margins either side… therefore DIV #wavewhite appears centered inside DIV #wave.

```auto
[COLOR=#000080]<div id=[COLOR=#0000ff]"wave"[/COLOR]>[/COLOR]
[COLOR=#000080]<div id=[COLOR=#0000ff]"wavewhite"[/COLOR]>[/COLOR] [COLOR=#000080]</div>[/COLOR]
[COLOR=#000080]</div>[/COLOR] 

```

```auto

    #wave {
    height:17px;
    width:100%;
    background:url(images/wave.png);    
}

#wavewhite {
    width:980px;
    height:17px;
    margin-left:auto;
    margin-right:auto;
    background-color:#fff;
} 

```

Please see link to image below to understand what I am trying to do :  
[URL="\<img src=’/uploads/kirupa/6495/40db23663a96504f.png’\>"]  
 ![](http://forum.kirupa.com/uploads/kirupa/6495/40db23663a96504f.png)

DIV #wave has a repeated background image - wave.png, DIV #wavewhite has a white background color. I want DIV #wavewhite to be below DIV #wave. So that the blue waves are on top of the white background of DIV #wavewhite.

Any suggestions would be much appreciated!!!

Nic