14/06/2013, 14:52
|
| | | Fecha de Ingreso: junio-2013
Mensajes: 6
Antigüedad: 10 años, 10 meses Puntos: 0 | |
| Problema con z-index
Buenas tardes quisiera ver si me pueden ayudar tengo un problema con z-index ya que el background me lo muestra sobrepuesto y no al fondo, estoy utilizando jquery para que cuando se redimensione la pantalla el background no pierda calidad.
Adjunto el codigo en css:
Código:
body {
overflow:hidden;
padding:0;margin:0;
height:100%;width:100%;
}
#realBody{
position:absolute;
z-index: 5;
overflow:auto;
height:100%;width:100%;
}
#bgimg {
position:absolute;
z-index: -1;
}
/* @group Toolbar */
.toolbar {
-webkit-box-sizing: border-box;
border-bottom: 1px solid #000;
padding: 10px;
height: 45px;
background-color:#004473;
background:-webkit-gradient(linear, right bottom, right top, color-stop(0.01, #004473), color-stop(1, #0272a4));
position: relative;
}
.toolbar > h1 {
position: absolute;
overflow: hidden;
left: 50%;
top: 10px;
line-height: 1em;
margin: 1px 0 0 -75px;
height: 40px;
font-size: 20px;
width: 150px;
font-weight: bold;
text-shadow: rgba(0,0,0,1) 0 -1px 1px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
color: #fff;
}
.button, .back, .cancel, .add {
position: absolute;
overflow: hidden;
top: 8px;
right: 10px;
margin: 0;
border-width: 0 5px;
padding: 0 3px;
width: auto;
height: 30px;
line-height: 30px;
font-family: inherit;
font-size: 12px;
font-weight: bold;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0;
text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;
background: none;
-webkit-border-image: url(img/button.png) 0 5 0 5;
}
.back {
left: 6px;
right: auto;
padding: 0;
max-width: 55px;
border-width: 0 8px 0 14px;
-webkit-border-image: url(img/back_button.png) 0 8 0 14;
}
.whiteButton,
.grayButton {
display: block;
border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 20px;
font-weight: bold;
text-decoration: inherit;
color: #d0ff00;
}
.grayButton {
-webkit-border-image: url(img/grayButton.png) 0 12 0 12;
color: #FFFFFF;
}
/* @end */
/* @group Lists */
ul {
color: #aaa;
border: 1px solid #333333;
font: bold 18px Helvetica;
padding: 0;
margin: 15px 10px 17px 10px;
}
ul li {
color: #666;
border-top: 1px solid #333;
border-bottom: #555858;
list-style-type: none;
padding: 10px 10px 10px 10px;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#22ffee), to(#404142));
overflow: hidden;
}
/* universal links on list */
ul li a, li.img a + a {
color: #4682B4;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
outline:none;
display: block;
padding: 6px;
line-height:38px;
text-transform:uppercase;
margin: -10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
text-shadow: rgba(0,0,0,.2) 0 1px 1px;
}
/*
@end */
/* @group Info */
.info {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#aaa), color-stop(.6,#CCCCCC));
font-size: 12px;
line-height: 16px;
text-align: center;
/*text-shadow: rgba(255,255,255,.8) 0 1px 0;*/
color: #444;
padding: 15px;
border-top: 1px solid rgba(255,255,255,.2);
font-weight: bold;
}
/* @end */
/* @group Edge to edge */
ul.edgetoedge {
border-width: 1px 0;
margin: 0;
padding: 0;
}
ul.edgetoedge li {
/*background: transparent;/*-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1e1f21), to(#272729));*/
border-bottom: 2px solid #000;
border-top: 1px solid #4a4b4d;
font-size: 20px;
margin-bottom: -1px;
background: #FFFAFA;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
ul.edgetoedge li.sep {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5)));
border-bottom: 1px solid #111113;
border-top: 1px solid #666;
color: #3e9ac3;
font-size: 16px;
margin: 1px 0 0 0;
padding: 2px 10px;
text-shadow: #000 0 1px 0;
}
ul.edgetoedge li em {
font-weight: normal;
font-style: normal;
}
/* @end */
/*pmb*/
ul.thumbView{
list-style:none;
margin:0px;
border:none;
}
ul.thumbView li {
float:left;
position:relative;
width:80px;
height:80px;
border:none;
margin:0px;
padding:0px;
background:transparent;
line-height:80px;
overflow:visible;
}
ul.thumbView li a {
height:80px;
margin:0;
padding:0;
width:80px;
text-align:center;
vertical-align:middle;
display:table-cell;
overflow:visible;
}
ul.thumbView li a img{
border:none;
vertical-align:middle;
-webkit-box-shadow:2px 2px 8px #000;
-moz-box-shadow:2px 2px 8px #000;
}
div.singleimage{
text-align:center;
width:100%;
}
div.singleimage img{
margin-top:30px;
-webkit-box-shadow:2px 2px 8px #000;
-moz-box-shadow:2px 2px 8px #000;
background-attachment:fixed;
}
.descriptionWrapper{
height:40px;
position:relative;
}
p#description{
text-align:center;
color:white;
text-transform:uppercase;
font-weight:bold;
margin:10px 0px 0px 0px;
padding:0px 45px;
}
p#precioxbulto{
text-align:center;
color:white;
text-transform:uppercase;
font-weight:bold;
margin:10px 0px 0px 0px;
padding:0px 45px;
}
p#precioxmayor{
text-align:center;
color:white;
text-transform:uppercase;
font-weight:bold;
margin:10px 0px 0px 0px;
padding:0px 45px;
}
p#codigo{
text-align:center;
color:white;
text-transform:uppercase;
font-weight:bold;
margin:10px 0px 0px 0px;
padding:0px 45px;
}
p#cantidad{
text-align:center;
color:white;
text-transform:uppercase;
font-weight:bold;
margin:10px 0px 0px 0px;
padding:0px 45px;
}
div#prev,div#next{
cursor:pointer;
position:absolute;
top:10px;
width:40px;
height:40px;
background-color:black;
background-repeat:no-repeat;
background-position:center center;
}
div#prev{
left:0px;
background-image:url(img/prev.png);
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
div#next{
right:0px;
background-image:url(img/next.png);
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
}
div.loader{
background:transparent url(img/ajax-loader.gif) no-repeat center center;
position:absolute;
top:90px;
width:100%;
left:0px;
height:24px;
}
/* @end */
|