hacer - posicion fija css
¿Puedo colocar un elemento fijo en relación con el padre? (10)
Esta pregunta ya tiene una respuesta aquí:
- Posición fija pero relativa al contenedor 21 respuestas
- Elemento de posición CSS "fijo" dentro del contenedor de desplazamiento 4 respuestas
Encuentro que cuando posiciono un elemento fijo, no importa si el elemento principal está posicionado relativo o no, ¿se colocará fijo, relativo a la ventana?
CSS
#wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; }
#feedback { position: fixed; right: 0; top: 120px; }
HTML
<div id="wrapper">
...
<a id="feedback" href="#">Feedback</a>
</div>
Actualización 2016
Ahora es posible en los navegadores modernos colocar un elemento fijo en relación con su contenedor. Un elemento que tiene una propiedad de transformación actúa como el viewport para 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%);
}
<div class="context">
<div class="viewport">
<div class="canvas">
<table>
<tr>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</tr>
<tr>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</tr>
<tr>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</tr>
<tr>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
<button class="centered">OK</button>
</div>
</div>
</div>
¡Esto funciona bien! Referencia a la respuesta detallada original: https://.com/a/11833892/5385623
css:
.level1 {
position: relative;
}
.level2 {
position: absolute;
}
.level3 {
position: fixed;
/* Do not set top / left! */
}
html:
<div class=''level1''>
<div class=''level2''>
<div class=''level3''>
Content
</div>
</div>
</div>
Con múltiples divs logré obtener un div fijo-y y absoluto-x. En mi caso, necesitaba un div en los lados izquierdo y derecho, alineado a un div de ancho centrado de 1180px.
<div class="parentdiv" style="
background: transparent;
margin: auto;
width: 100%;
max-width: 1220px;
height: 10px;
text-align: center;">
<div style="
position: fixed;
width: 100%;
max-width: 1220px;">
<div style="
position: absolute;
background: black;
height: 20px;
width: 20px;
left: 0;">
</div>
<div style="
width: 20px;
height: 20px;
background: blue;
position: absolute;
right: 0;">
</div>
</div>
</div>
Déjame dar respuestas a las dos posibles preguntas. Tenga en cuenta que su título existente (y la publicación original) hacen 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 primario , 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 principal.
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 hacia abajo en relación con la posición de parentDiv.
Para colocar un elemento "fijo" en relación con la ventana , desea position:fixed , y puede usar top: left: right: y bottom: para posicionar como mejor le parezca.
Por ejemplo:
#yourDiv { position:fixed; bottom:40px; right:40px; }
Esto colocará 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.
Es una publicación antigua, pero dejaré aquí mi solución de JavaScript en caso de que alguien la necesite.
// 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
}
<div id="blbl" >
<div><!-- sticky div --></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
Notas
Utilicé transform: translateY (@px) porque debería ser ligero para calcular, high-performance-animations
Solo probé esta función con navegadores modernos, no funcionará con los navegadores antiguos donde se requieren proveedores (y, por supuesto, IE)
Este es un ejemplo de la sugerencia de Jon Adams anterior para corregir un 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 el lado derecho de la barra de herramientas allí.
HTML
<div id="pageElement"></div>
<div id="toolbar"></div>
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();
});
La especificación de CSS requiere que la position:fixed esté anclada a la ventana gráfica, no al elemento posicionado que lo contiene.
Si debe especificar sus coordenadas en relación con un padre, primero deberá usar JavaScript para encontrar la posición del padre en relación con la ventana gráfica, luego establecer la posición del elemento secundario (fijo) en consecuencia.
ALTERNATIVA : Algunos navegadores tienen soporte CSS sticky que limita un elemento que se colocará dentro de su contenedor y la ventana gráfica. Por el mensaje de confirmación:
sticky... restringe un elemento para colocarlo dentro de la intersección de su caja de contenedor y la ventana gráfica.Un elemento de posición pegajosa se comporta como posición: relativo (el espacio está reservado para él en el flujo), pero con un desplazamiento que está determinado por la posición pegajosa. Se modificó isInFlowPositioned () para cubrir relativo y pegajoso.
Dependiendo de sus objetivos de diseño, este comportamiento puede ser útil en algunos casos. Actualmente es un borrador de trabajo y tiene un apoyo decente, además de los elementos de la tabla. position: sticky todavía necesita un prefijo -webkit en Safari.
Consulte caniuse para obtener estadísticas actualizadas sobre el soporte del navegador.
Primero, establezca la position: fixed e left: 50% , y segundo: ahora su inicio es un centro y puede establecer una nueva posición con margen.
Sé que este es un post más antiguo, pero creo que un buen ejemplo de lo que Jiew Meng estaba tratando de hacer ya se puede encontrar en este sitio. Echa un vistazo al menú lateral que se encuentra aquí: https://.com/faq#questions . Mirándolo sin entrar demasiado en él, puedo decir que javascript adjunta una posición fija una vez que el desplazamiento llega por debajo de la etiqueta de anclaje y elimina la posición fija si el desplazamiento va por encima de esa misma etiqueta de anclaje. Con suerte, eso hará que alguien comience en la dirección correcta.
Sé que esto es super viejo, pero después de no encontrar la respuesta (pura CSS) que estaba buscando, se me ocurrió esta solución (parcialmente abstraída de medium.com ) y pensé que podría ayudar a otros que buscan hacer lo mismo.
Si combina las respuestas de @DuckMaestro, puede colocar un elemento fijo en relación con un padre (en realidad, abuelo). position: absolute; uso position: absolute; para posicionar un elemento dentro de un padre con position: relative; y luego position: fixed; en un elemento dentro del elemento posicionado absoluto como tal:
HTML
<div class="relative">
<div class="absolute">
<a class="fixed-feedback">This element will be fixed</a>
</div>
</div>
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;
}
Como dijo @JonAdams, la definición de position: fixed requiere que el elemento se coloque en relación con la ventana gráfica, pero puede evitar el aspecto horizontal que utiliza esta solución.
Nota: Esto es diferente a solo establecer un valor a la right o left en el elemento fijo porque eso causaría que se mueva horizontalmente cuando se cambia el tamaño de una ventana.