PROBLEMA Sovrapposizione Div, problema insolito

[DarkThought]

Salve a tutti, sto creando da zero un sito e ho riscontrato il seguente problema:
Ho creato un foglio di stile per ogni sezione!
Ne ho uno per l'Header, uno per la Barra dei Menu, uno per il Contenuto e uno per il Footer!
Il problema è sorto quando sono andato a creare dei css nel file Contenuto.css!


Nel file BarraMenu.css ho:

html, body
{
    width: 100%;
    height: 100%;
    font-family: Verdana, Arial, Helvetica;
    font-size: 16px;
    background-color: #bbffcb;
    margin: 0;
    padding: 0;
    color: #000000;
}


[URL=http://www.tomshw.it/forum/usertag.php?do=list&action=hash&hash=Menu]#Menu[/URL]  {
    margin: 3em auto;
    width: 54.75em;
    height: 3em;
    background: #cd97f3;
    background: -moz-linear-gradient(100% 100% 90deg, #ebcffe, #cd97f3);
    background: -webkit-gradient(linear, left top, left bottom, from(#ebcffe), to(#cd97f3));
    border: 0.125em solid #ffffff;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
ul[URL=http://www.tomshw.it/forum/usertag.php?do=list&action=hash&hash=Menu]#Menu[/URL] Barra {
    font-family: Verdana, sans-serif;
    font-size: 0.75em;
    margin: 0 0 0 15em;
    padding: 0;
    list-style: none;
}
    ul[URL=http://www.tomshw.it/forum/usertag.php?do=list&action=hash&hash=Menu]#Menu[/URL] Barra li {
        position: relative;
        display: block;
        width: 10em;
        height: 4em;
        float: left;
        border-right: 0.125em solid #000000;
        border-left: 0.125em solid #000000;
    }
        ul[URL=http://www.tomshw.it/forum/usertag.php?do=list&action=hash&hash=Menu]#Menu[/URL] Barra li a {
            position: absolute;
            width: 10em;
            height: 3.2em;
            padding-top: 0.8em;
            color: #ffffff;
            display: block;
            font-weight: bold;
            line-height: 2.2em;
            text-decoration: none;
            text-align: center;
        }
        ul[URL=http://www.tomshw.it/forum/usertag.php?do=list&action=hash&hash=Menu]#Menu[/URL] Barra li.active, ul[URL=http://www.tomshw.it/forum/usertag.php?do=list&action=hash&hash=Menu]#Menu[/URL] Barra li:hover {
            width: 10em;
            height: 4em;
            background: #cd97f3;
            background: -moz-linear-gradient(100% 100% 90deg, #dbadfc, #aa43f2);
            background: -webkit-gradient(linear, left top, left bottom, from(#dbadfc), to(#aa43f2));
        }

Poi nel file Contenuto.css ho messo:

[URL=http://www.tomshw.it/forum/usertag.php?do=list&action=hash&hash=Contenuto]#Contenuto[/URL]  {
    margin: -3em auto;
    width: 55em;
    height: 40em;
    background: #ffffff;
}

l'HTML riguardante questa parte è il seguente:

<div id="Menu">
    <ul id="MenuBarra">
        <li><a href="#">Tutte le Offerte</a></li>
        <li><a href="#">Coupon</a></li>
        <li><a href="#">Week End</a></li>
        <li><a href="#">Come Funziona</a></li>
    </ul>
</div>
<div id="Contenuto">
</div>

Ma quando faccio un'anteprima, il #Contenuto si va a sovrapporre al #Menu .


Allora ho aggiunto in #Menu {} il comando " z-index: 1; ", ma niente!
Così ho messo il #Contenuto dentro il file BarraMenu.css, ma non è cambiato comunque nulla.
Come mai?
Vi sarei grato se mi deste una mano ^^
Grazie anticipatamente!

- - - Updated - - -

Risolto da solo, grazie ^^


Se qualcuno dovesse avere il mio stesso problema, questa è la risposta:


i contenuti devono essere sullo "stesso piano", mi spiego:


Entrambi devono essere o "position: absolute;" oppure "position: relative;", nel mio caso specifico, dovevano essere in "relative" =)