Salve, ho un problema con due div che si sovrappongono e non riesco risolverlo. in pratica ho un div con le immagini di sfondo con effetto parallax (sono 5 immagini sovrapposte che si muovono con lo spostamento del mouse) e un altro div contenitore dove c'è il menu e un logo; non riesco a mettere in primo piano il menu con il logo, ho provato a cambiare il position con un float e viceversa ma non funziona lo stesso..l'immagine va sempre sopra il contenitore nascondendo il contenuto.

se qualcuno può risolvermi il problema glie ne sarei grata..davvero

vi allego il file html e il css..il file java non credo sia necessario..

HTML:

<html>
<head>
<title>Jessica Lavalle</title>
<script src="../JS/jquery.min.js"></script>
<script src="../JS/jquery.jparallax.js"></script>
<link rel="stylesheet" href="../CSS/home.css" type="text/css" />
</head>
<body>

<!--sfondo-->
<div class="effettoparallax">
<div id="sfondo">
<img src="../img/home/1.png" alt="" style="width:1600px;height:800px;"/>
<img src="../img/home/2.png" alt="" style="width:1400px;height:700px;"/>
<img src="../img/home/3.png" alt="" style="width:1400px;height:700px;"/>
<img src="../img/home/4.png" alt="" style="width:1200px;height:600px;"/>
<img src="../img/home/5.png" alt="" style="width:900px;height:500px;"/>
</div>
</div>


<div id="head">
<a href="Home2.html"><img id="logo" src="../img_home/logo_JL.png" alt=""/></a>
<div id="menu">
<div id="tasto"> <button name="home" value="home" type="button" class="menu1" style="" onClick="location.href='Home2.html'" > Home </button> </div>
<div id="tasto"><button name="chisono" value="chisono" type="button" class="menu2" onClick="location.href='Chisono.html'"> Chi Sono </button></div>
<div id="tasto"> <button name="portfolio" value="portfolio" type="button" class="menu2" style=" " onClick="location.href='PT.html'"> Portfolio </button> </div>
<div id="tasto"><button name="store" value="store" type="button" class="menu1" onClick="location.href='Store.html'"> Store </button></div>
<div id="tasto"><button name="contatti" value="contatti" type="button" class="menu2" onClick="location.href='Contatti.html'"> Contatti </button></div>
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('#sfondo').jparallax();
});
</script>
</body>
</html>

CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}


del {
text-decoration: line-through;
}

table {
border-collapse: collapse;
border-spacing: 0;
}






/* fine */


body{
background:#eee;
margin:0;
padding:0
}
.effettoparallax{
background:#fff;
width:100%;
}
#sfondo{
position:relative;
overflow:hidden;
width:100%;
height:100%;
top:0px;
}


#head{
float:right;
width:500px;
height:230px;
margin-right:0px;
margin-top:-200px;
background-color:#C01417;
}
#logo{
float:right;
margin-top:20px;
margin-right:30px;
width:108px;
height:100px;
}
#menu{
float:right;
margin-top:20px;
margin-right:30px;
height:25px;
}
#tasto{
float:left;
height:25px;
}
.menu1{
float:left;
padding-left:10px;
padding-top:5px;
width:65px;
height:25px;
border-style:none;
color:#090388;
font-family: 'Nunito', sans-serif;
font-size:18px;
background-color:transparent;
line-height: 80%;
cursorointer;
}
.menu2{
float:left;
padding-left:10px;
padding-top:5px;
width:95px;
height:25px;
border-style:none;
color:#090388;
font-family: 'Nunito', sans-serif;
font-size:18px;
background-color:transparent;
line-height: 80%;
cursorointer;
}
.menu1:hover{
border-style:none;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
-ms-border-radius:10px 10px 10px 10px;
-o-border-radius:10px 10px 10px 10px;
color:#fff;
background-color:#090388;
width:65px;
height:25px;
}
.menu2:hover{
border-style:none;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
-ms-border-radius:10px 10px 10px 10px;
-o-border-radius:10px 10px 10px 10px;
color:#fff;
background-color:#090388;
width:95px;
height:25px;
}


/* fine HEAD */