¿Puedo colocar un elemento fijo en relación con el elemento primario?

Encuentro que cuando coloco un elemento fijo, no importa si el elemento primario se coloca relativo o no, se posicionará fijo, en relación con la ventana?

CSS

#wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; } #feedback { position: fixed; right: 0; top: 120px; } 

HTML

 
... Feedback

Permítanme proporcionar respuestas a ambas preguntas posibles. Tenga en cuenta que su título actual (y publicación original) hace una pregunta diferente a la que busca en su edición y comentario posterior.


Para colocar un elemento “fijo” en relación con un elemento principal , desea la position:absolute en el elemento secundario y cualquier modo de posición que no sea el predeterminado o estático en su elemento primario.

Por ejemplo:

 #parentDiv { position:relative; } #childDiv { position:absolute; left:50px; top:20px; } 

Esto childDiv elemento childDiv 50 píxeles a la izquierda y 20 píxeles a la posición de parentDiv.


Para colocar un elemento “fijo” en relación con la ventana , desea la position:fixed , y puede usar top: left: right: y bottom: para colocarla como mejor le parezca.

Por ejemplo:

 #yourDiv { position:fixed; bottom:40px; right:40px; } 

Esto posicionará su yourDiv fijo en relación con la ventana del navegador web, 40 píxeles desde el borde inferior y 40 píxeles desde el borde derecho.

La especificación CSS requiere que la position:fixed esté anclada a la ventana gráfica, no el elemento posicionado.

Si debe especificar sus coordenadas relativas a un padre, primero deberá usar JavaScript para encontrar la posición del padre con respecto a la ventana gráfica, luego establecer la posición del elemento hijo (fijo) en consecuencia.

ALTERNATIVA : Algunos navegadores tienen soporte de CSS sticky que limita la ubicación de un elemento dentro de su contenedor y la ventana gráfica. Por el mensaje de compromiso:

sticky … limita un elemento que se colocará dentro de la intersección de su cuadro de contenedor y la ventana gráfica.

Un elemento posicionado con firmeza se comporta como posición: relativo (el espacio está reservado para el flujo), pero con un desplazamiento que está determinado por la posición adhesiva. Se cambió isInFlowPositioned () para cubrir relativa y adhesiva.

Dependiendo de sus objectives de diseño, este comportamiento puede ser útil en algunos casos. Actualmente es un borrador en funcionamiento y tiene un soporte decente, aparte de los elementos de la tabla. position: sticky aún necesita un prefijo -webkit en Safari.

Ver canius para estadísticas actualizadas sobre soporte de navegador.

primero, establecer position: fixed e left: 50% , y segundo – ahora su inicio es un centro y puede establecer una nueva posición con margen.

Actualización 2016

Ahora es posible en los navegadores modernos posicionar un elemento fijo en relación con su contenedor. Un elemento que tiene una propiedad de transformación actúa como la ventana gráfica de cualquiera de sus elementos secundarios de posición fija.

 .context { width: 300px; height: 250px; margin: 100px; transform: translateZ(0); } .viewport { width: 100%; height: 100%; border: 1px solid black; overflow: scroll; } .centered { position: fixed; left: 50%; bottom: 15px; transform: translateX(-50%); } 
 
stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff

Sé que esto es muy antiguo, pero después de no encontrar la respuesta (pure CSS) que estaba buscando, se me ocurrió esta solución (parcialmente resumida de medium.com ) y pensé que podría ayudar a otros a hacer lo mismo.

Si combina las respuestas de @ DuckMaestro, puede colocar un elemento fijo relativo a uno de los padres (en realidad, abuelo). Usar position: absolute; colocar un elemento dentro de un padre con position: relative; y luego position: fixed; en un elemento dentro del elemento de posicionamiento absoluto como ese:

HTML

  

CSS

 .relative { margin: 0 auto; position: relative; width: 300px; } .absolute { position: absolute; right: 0; top: 0; width: 50px; } .fixed-feedback { position: fixed; top: 120px; width: 50px; } 

EJEMPLO

Al igual que @JonAdams dijo, la definición de position: fixed requiere que el elemento se coloque en relación con la ventana gráfica, pero puede moverse por el aspecto horizontal de la misma utilizando esta solución.

Nota: Esto es diferente a solo establecer un valor de right o left en el elemento fijo porque eso provocaría que se mueva horizontalmente cuando se cambia el tamaño de una ventana.

Aquí hay un ejemplo de la sugerencia de Jon Adams anterior para arreglar una div (barra de herramientas) en el lado derecho de su elemento de página usando jQuery. ¡La idea es encontrar la distancia desde el lado derecho de la ventana gráfica al lado derecho del elemento de la página y mantener allí el lado derecho de la barra de herramientas!

HTML

 

CSS

 #toolbar { position: fixed; } .... 

jQuery

 function placeOnRightHandEdgeOfElement(toolbar, pageElement) { $(toolbar).css("right", $(window).scrollLeft() + $(window).width() - $(pageElement).offset().left - parseInt($(pageElement).css("borderLeftWidth"),10) - $(pageElement).width() + "px"); } $(document).ready(function() { $(window).resize(function() { placeOnRightHandEdgeOfElement("#toolbar", "#pageElement"); }); $(window).scroll(function () { placeOnRightHandEdgeOfElement("#toolbar", "#pageElement"); }); $("#toolbar").resize(); }); 

Sé que esta es una publicación más antigua, pero creo que ya se puede encontrar un buen ejemplo de lo que Jiew Meng estaba tratando de hacer en este sitio. Consulte el menú lateral que se encuentra aquí: https://stackoverflow.com/faq#questions . Si lo miro sin profundizar demasiado, puedo decir que javascript agrega una posición fija una vez que el desplazamiento toca debajo de la etiqueta de anclaje y elimina el posicionamiento fijo si el desplazamiento va por encima de la misma etiqueta de anclaje. Con suerte, eso hará que alguien comience en la dirección correcta.

Es una publicación anterior pero dejaré aquí mi solución javascript por si alguien la necesita.


 // you only need this function function sticky( _el ){ _el.parentElement.addEventListener("scroll", function(){ _el.style.transform = "translateY("+this.scrollTop+"px)"; }); } // how to make it work: // get the element you want to be sticky var el = document.querySelector("#blbl > div"); // give the element as argument, done. sticky(el); 
 #blbl{ position:relative; height:200px; overflow: auto; background: #eee; } #blbl > div{ position:absolute; padding:50px; top:10px; left:10px; background: #f00 } 
 




















































Con múltiples divs logré obtener divs fixed-y y absolute-x. En mi caso, necesitaba un div en los lados izquierdo y derecho, alineado a un div centrado de 1180 px de ancho.

  

Esto funciona bien! Referencia a la respuesta detallada original: https://stackoverflow.com/a/11833892/5385623

css:

 .level1 { position: relative; } .level2 { position: absolute; } .level3 { position: fixed; /* Do not set top / left! */ } 

html:

 
Content