hola que tal compañeros, ando haciendo una web con css y me encontre con un problema con el z-index,,, lo que pasa esque quendo dos divs en este orden el el html: main-content y content, el main-content tiene una imagen de fondo para que el content se vea con las esquinas redondeadas, pero asi como estan en el html se muestra el content arriba del main-content y lo que se me ocurrio fue agregarla la propiedad z-index, a main-content le puse z-index: 2 y a content z-index:1 para que se mostrara abajo pero no sirvio y me puse a investigar de la dicha propiedad y leei que le tenian que tener la propiedad de position: o float: para que funcionaran y eso hice le puse position:relative a los dos divs que les queria aplicar el z-index pero tampoco funciono y les cambiar a otra position y tampoco sirvio y la verdad no se que este haciendo mal
aqui les dejo mi codigo css y la url de mi web haber si me pueden echar la mano
Código:
* {
margin:0;
padding:0;
}
body {
background:#DADADA url(images/home-bg.png) no-repeat fixed bottom;
font-family:Arial, Helvetica, sans-serif;
margin:0;
}
#main {
background:url(images/main-bg.png) repeat-y;
height:auto;
margin:auto;
overflow:hidden;
width:1020px;
}
#wrapper {
height:auto;
margin:0 10px;
overflow:hidden;
width:1000px;
}
#header {
background:url(images/header-bg.png) no-repeat;
height:auto;
padding:17px;
width:auto;
}
#navbar li, #navbar a {
display:block;
height:30px;
}
#navbar li {
float:left;
list-style-type:none;
margin:0;
padding:0;
position:relative;
top:0;
width:200px;
}
#navbar-noticias {
background:url(images/navbar-bg.jpg);
height:30px;
left:0;
padding:0;
width:200px;
}
#navbar-noticias a:hover {
background:url(images/navbar-bg.jpg) 0 -30px;
height:30px;
left:0;
width:200px;
}
#navbar-noticias .selected {
background:url(images/navbar-bg.jpg) 0 -30px;
height:30px;
left:0;
width:200px;
}
#navbar-comunidad {
background:url(images/navbar-bg.jpg) -200px 0;
height:30px;
left:0;
width:200px;
}
#navbar-comunidad a:hover {
background:url(images/navbar-bg.jpg) -200px -30px;
height:30px;
left:0;
width:200px;
}
#navbar-comunidad .selected {
background:url(images/navbar-bg.jpg) -200px -30px;
height:30px;
left:0;
width:200px;
}
#navbar-chat {
background:url(images/navbar-bg.jpg) -400px 0;
height:30px;
left:0;
width:200px;
}
#navbar-chat a:hover {
background:url(images/navbar-bg.jpg) -400px -30px;
height:30px;
left:0;
width:200px;
}
#navbar-chat .selected {
background:url(images/navbar-bg.jpg) -400px -30px;
height:30px;
left:0;
width:200px;
}
#navbar-buscador {
background:url(images/navbar-bg.jpg) -600px 0;
height:30px;
left:0;
width:200px;
}
#navbar-buscador a:hover {
background:url(images/navbar-bg.jpg) -600px -30px;
height:30px;
left:0;
width:200px;
}
#navbar-buscador .selected {
background:url(images/navbar-bg.jpg) -600px -30px;
height:30px;
left:0;
width:200px;
}
#navbar-contacto {
background:url(images/navbar-bg.jpg) -800px 0;
height:30px;
left:0;
width:200px;
}
#navbar-contacto a:hover {
background:url(images/navbar-bg.jpg) -800px -30px;
height:30px;
left:0;
width:200px;
}
#navbar-contacto .selected {
background:url(images/navbar-bg.jpg) -800px -30px;
height:30px;
left:0;
width:200px;
}
#main-container {
background:#363739 url(images/main-container-bg.png) no-repeat;
clear:both;
height:800px;
margin:auto;
padding-top:15px;
position:relative;
width:1000px;
z-index:1;
}
#container {
background-color:#FFF;
height:auto;
margin:0 5px;
padding-top:15px;
position:relative;
width:990px;
z-index:0;
}
#featured {
background-color:#FFFFFF;
border:5px solid #CCCCCC;
height:250px;
margin:0 auto 15px;
padding-right:250px;
position:relative;
width:400px;
}
#featured ul.ui-tabs-nav {
left:400px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:1px;
padding:0;
position:absolute;
top:0;
width:auto;
}
#featured ul.ui-tabs-nav li {
color:#666666;
font-size:12px;
padding:1px 1px 1px 13px;
}
#featured ul.ui-tabs-nav li img {
background-color:#FFFFFF;
border:1px solid #EEEEEE;
float:left;
margin:2px 5px;
padding:2px;
}
#featured ul.ui-tabs-nav li span {
font-family:Verdana;
font-size:11px;
line-height:18px;
}
#featured li.ui-tabs-nav-item a {
background-color:#FFFFFF;
color:#333333;
display:block;
height:60px;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover {
background-color:#F2F2F2;
}
#featured li.ui-tabs-selected {
background:transparent url(images/featured/selected-item.gif) no-repeat left top;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a {
background:#CCCCCC none repeat scroll 0 0;
}
#featured .ui-tabs-panel {
background:#999999 none repeat scroll 0 0;
height:250px;
position:relative;
width:400px;
}
#featured .ui-tabs-panel .info {
background:transparent url(images/featured/transparent-bg.png) repeat;
height:70px;
left:0;
position:absolute;
top:180px;
}
#featured .info h2 {
color:#FFFFFF;
font-family:Georgia,serif;
font-size:18px;
margin:0;
overflow:hidden;
padding:5px;
}
#featured .info p {
color:#F0F0F0;
font-family:Verdana;
font-size:11px;
line-height:15px;
margin:0 5px;
}
#featured .info a {
color:#FFFFFF;
text-decoration:none;
}
#featured .info a:hover {
text-decoration:underline;
}
#featured .ui-tabs-hide {
display:none;
}
marque con rojo para su mejor ubicacion en los lugares donde tengo problemas
pk-network.co.cc/
un saludo
y muchas gracias de antemano