Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/04/2015, 08:05
Avatar de Pentaxeros
Pentaxeros
 
Fecha de Ingreso: mayo-2008
Mensajes: 173
Antigüedad: 16 años, 7 meses
Puntos: 3
div anclado a un elemento superior

Hola, estoy tratando de hacer una animacion tipo material design, y me encuentro con un problema.

tengo esto:
HTML
<div id="MAESTRO" class="maestro">
<div id="MASCARA" class="mascara">
<div id="CONTENEDOR" class="contenedor">
Bla bla bla bla bla bla...
</div>
</div>
</div>


CSS:
.maestro
{
postion:relative;
width:100%;
height:100%;
}
.mascara
{
position: absolute;
top: 30px;
right: 30px;
width: 20px;
height: 20px;
border-radius: 10px;
}
.contenedor
{
position:absolute;
width: 150px;
height: 100px;
background-color:#fff;
}


Lo que quiero es poder mediante JQuery es animar el div MASCARA, cambiando el tamaño y radio de border y hacer animacion de forma que el CONTENEDOR, aparece de la nada con una animacion "circular"...

El problema es que en el momento que cambio la posicion tamaño etc de MASCAR, cambia la posicion de CONTENEDOR.

Quiero que CONTENEDOR, este FIJO, que no se mueva, este anclado a MAESTRO, independientemente del tamaño y poscion de mascara...

Alguna idea???

He probado a que CONTENEDOR tenga position:fixed, pero enconces, MASCARA no le afecta y no consigo el efecto de MASCARA CIRCULAR...

GRACIAS!!!