Hola, saludos a todos, soy diseñador empezando en la programacion y estoy creando una web, pero tengo un problema :"La cabecera esta en position fixed(fija), pero debajo tengo un div llamado etiqueta en donde esta el banner animado en css(animation con background-position), pero al momento de hacer el efecto opacity en la img background de la div etiqueta, el div etiqueta salta al frente posicionandose sobre la cabecera". Espero me puedan ayudar. Gracias
P.D.:(1) He usado z-index pero no he visto resultado alguno. Mi codigo css esta en stylus.
(2)Pero al quitar el efecto opacity todo funciona correctamente.
Codigo HTML:
Código HTML:
<header>
<div id="cabecera">
<div id="logotipo">
<a href="index.html"><img src="img/logomickysgym.png"></a>
</div>
<nav>
<ul id="navprincipal">
<li class="nombre">Micky's Gym & Fitness</li>
<li class="opciones"><a href="clases.html">Clases</a></li>
<li class="opciones"><a href="#">Rutinas</a></li>
<li class="opciones" id="desplegable">
<a href="#">Músculos / Ejercicio</a>
<ul id="navmusculos">
<li><a href="#">Abdominales</a></li>
<li><a href="#">Biceps</a></li>
<li><a href="#">Espalda</a></li>
<li><a href="#">Glúteos</a></li>
<li><a href="#">Hombros</a></li>
<li><a href="#">Piernas</a></li>
<li><a href="#">Triceps</a></li>
</ul>
</li>
<li class="opciones"><a href="#">Staff</a></li>
<li class="opciones"><a href="#">Contacto</a></li>
<li id="facebook" class="redsocial"><a href="#"></a></li>
<li id="twitter" class="redsocial"><a href="#"></a></li>
<li class="horario"> L - S : 9:00 - 20:00 hrs.</li>
</ul>
</nav>
</div>
<div id="presentacion">
<div id="etiquetas">
<div id="etiquetajuste">
<div id="etiquetatexto">
<div id="abdominales">
<h3>¿ABDOMINALES <br>REALES?</h3>
</div>
<div id="nosotros">
<div id="consiguelos">
¡CONSÍGUELOS CON
</div>
<img src="img/nosotros.png">
</div>
</div>
<div id="etiquetaprecio">
<div id="oferta">
<img src="img/oferta.png">
</div>
</div>
</div>
</div>
</div>
</header> Codigo CSS:
Código:
body
background:url("../img/fondofondo2.jpg") center top fixed no-repeat
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
width: 100%
margin: 0 auto
overflow: scroll
text-align: center
header
width: 100%
margin: 0 auto
text-align: center
nav
/*margin-left: -4px*/
height:26px
#logotipo,nav
display: inline-block
vertical-align: top
margin: 0
padding: 0
nav ul li a
list-style:none
text-decoration:none
#navprincipal
box-shadow: 2px 2px 3px rgba(0,0,0,.35)
nav ul li
display: inline-block
background: #00afbd
font-size: 14px
list-style: none
margin: auto 0
padding: .2em 1em
position:relative
text-align: center
vertical-align: middle
.opciones
display: inline-block
background: #00afbd
border-right: 3px solid #0089a0
color: #00667c
font-size: 14px
list-style: none
text-decoration:none
margin-right: -4px
padding: .265em .6em
vertical-align: middle
.opciones a:hover
color: rgba(1, 45, 61, 1)
#abdominales
width:125px
margin-left:1.35em
margin-bottom:1em
opacity:1
-webkit-transform:translateX(22px)
-webkit-animation:verabdominales 10s
-webkit-animation-iteration-count: infinite
@-webkit-keyframes verabdominales
0%
opacity:0
-webkit-transform:translateX(-10px)
7%
opacity:0
-webkit-transform:translateX(-10px)
25%
opacity:1
-webkit-transform:translateX(22px)
100%
opacity:1
-webkit-transform:translateX(22px)
#cabecera
position: fixed
left: 17%
margin: 0 auto
text-align: center
padding:0
#contenedor
width: 80%
margin: 0 auto
#consiguelos
color: rgba(0,102,124,1)
font-family:ubuntubolditalic
font-size:24px
margin:0
padding-top:.1em
#etiquetas
background-color: rgba(0, 0, 0, .2)
background:url("../img/banner.png") center bottom no-repeat
background-size:990px 193px
background-position:-10px 36px
opacity:1
padding:0 1em
z-index:-100
width:78%
margin:0 auto
padding-top: 6em
padding-bottom: 0em
-webkit-animation: verbanner 10s
-webkit-animation-iteration-count: infinite
@-webkit-keyframes verbanner
0%
background-position:-10px 36px
opacity:0
10%
background-position:15px 36px
opacity:1
100%
background-position:15px 36px
opacity:1
#etiquetatexto, #etiquetaprecio
display:inline-block
vertical-align:bottom
margin:0
#etiquetatexto
width:35%
margin:0 0 0 5.5em
#etiquetaprecio
width:15%
text-align:left
margin:0 0 0 14%
padding:0
font-size:0
opacity:1
-webkit-transform:translateX(-30px)
-webkit-animation:verprecio 10s
-webkit-animation-iteration-count: infinite
@-webkit-keyframes verprecio
0%
opacity:0
-webkit-transform:translateX(-30px)
20%
opacity:0
-webkit-transform:translateX(-30px)
35%
opacity:0
-webkit-transform:translateX(-30px)
45%
opacity:1
-webkit-transform:translateX(0px)
50%
opacity:1
-webkit-transform:translateX(0px)
100%
opacity:1
-webkit-transform:translateX(0px)
#etiquetajuste
margin:0
text-align:left
#etiquetas img
margin:0
#logotipo
margin: 0
padding:0
#desplegable #navmusculos
border-radius:0 0 7px 7px
box-shadow: 2px 2px 3px rgba(0,0,0,.35)
left:0
margin:0
opacity:0
position:absolute
width:142.5px
overflow:hidden
top: 26px;
transition: opacity 1s
-webkit-transition: opacity 1s
-moz-transition: opacity 1s
#desplegable:hover > #navmusculos
opacity:1
margin:0
position:absolute
left:0
top:26px
#navmusculos li a
border:none
margin:0
padding:0
text-align:center
padding:5px 20px
#navmusculos li a:hover
color:#00667c
#navmusculos li:hover
background-color:#00afbd
#navmusculos li
background-color:#00d7de
border:1px solid #05e5e5
display:block
list-style:none
margin:0 auto
text-decoration:none
height:0px
overflow:hidden
transition:height .5s
-webkit-transition:height .5s
-moz-transition:height .5s
-ms-transition:height 1.5s
#navmusculos li:last-child
border-radius:0 0 7px 7px
#desplegable:hover > #navmusculos li
height:20px
overflow:visible
#nosotros
opacity:1
-webkit-transform:translateX(-30px)
-webkit-animation:vernosotros 10s
-webkit-animation-iteration-count: infinite
@-webkit-keyframes vernosotros
0%
opacity:0
-webkit-transform:translateX(-30px)
20%
opacity:0
-webkit-transform:translateX(-30px)
35%
opacity:1
-webkit-transform:translateX(30px)
50%
opacity:1
-webkit-transform:translateX(30px)
100%
opacity:1
-webkit-transform:translateX(30px)
#presentacion
margin:0
padding:0