La posición absoluta no funciona dentro de la posición fija

Contenedores tanto main como inner que toman position: fixed . ¿Cómo hacer contenedor interno con position:absolute contenedor position:absolute y principal con position:fixed ?

Debe definir las propiedades top , right , bottom o left cuando utilice posicionamiento fixed , relative o absolute en un elemento.

 #main { background: #000; position: fixed; height: 300px; width: 200px; left: 20px; top: 10px; } #inner { background: #f00; position: absolute; height: 100px; width: 100px; left: 10px; top: 10px; } 
 

¿Estás buscando algo similar?

 
#main { position: fixed; width: 100px; height: 100px; border: 1px solid #000; top: 50px; left: 10px; } #inner { position: absolute; width: 10px; height: 10px; border: 1px solid #f00; // top: 0px; // left: 0px; top: 10px; left: 10px; }

Esto puede ayudarte:

  #main{ background:#ccc; width:300px; height:300px } #inner{ background:#fff; text-align:center; margin:20px; padding:20px } 
inner div

Aquí está el código jsfiddle: https://jsfiddle.net/awvov63a/

position:absolute funcionará de acuerdo a su propiedad de posición del div padre. Pero position:fixed siempre tomará su posición de acuerdo con el puerto de vista del usuario, sin importar dónde se encuentre el elemento. (No tiene importancia para su elemento padre)

En el ejemplo, #main está en posición fixed . Y tener una propiedad left 200px asignada a ella. Así que tomará 200px a la izquierda en la ventana gráfica , donde #inner también tiene una izquierda: 100px, pero tomará 100px a la izquierda del padre, que es #main . Si el interior también tiene una posición fija, se tomará a la izquierda desde la ventana gráfica. (Anule el comentario del código comentado en codepen para verlo en acción)

HTML

 

CSS

 #main { position: fixed; background: #cc3; width: 500px; height: 500px; left: 200px; } #inner { position: absolute; width: 100px; height: 100px; background: #1d3; left: 100px; top:100px; } 

http://codepen.io/asim-coder/pen/LZNxJM