Pregunta Posición fija pero relativa al contenedor


Estoy tratando de arreglar un div por lo que siempre se pega a la parte superior de la pantalla, usando:

position: fixed;
top: 0px;
right: 0px;

sin embargo, el div está dentro de un contenedor centrado. Cuando uso position:fixed arregla el div en relación con la ventana del navegador, como que está contra el lado derecho del navegador. En cambio, debe ser reparado en relación con el contenedor.

Yo sé eso position:absolute se puede usar para arreglar un elemento relacionado con div, pero cuando te desplazas hacia abajo de la página, el elemento se desvanece y no se pega a la parte superior como con position:fixed.

¿Hay algún truco o solución para lograr esto?


508
2017-07-22 17:47


origen


Respuestas:


Respuesta corta: no. (Ahora es posible con la transformación CSS. Consulte la edición a continuación)

Respuesta larga: el problema con el uso del posicionamiento "fijo" es que toma el elemento fuera de flujo. por lo tanto, no puede ser reubicado en relación con su padre porque es como si no tuviera uno. Sin embargo, si el contenedor tiene un ancho fijo y conocido, puede usar algo como:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Editar (03/2015):

Esta es información desactualizada. Ahora es posible centrar el contenido de un tamaño dinámico (horizontal y verticalmente) con la ayuda de la magia de la transformación CSS3. Se aplica el mismo principio, pero en lugar de usar el margen para compensar su contenedor, puede usar translateX(-50%). Esto no funciona con el truco de margen anterior porque no sabes cuánto compensarlo a menos que el ancho sea fijo y no puedas usar valores relativos (como 50%) porque será relativo al padre y no al elemento al que se aplica. transform se comporta de manera diferente Sus valores son relativos al elemento al que se aplican. Así, 50% para transform significa la mitad del ancho del elemento, mientras 50% para el margen es la mitad del ancho de los padres. Esto es un Solución IE9 +

Usando un código similar al ejemplo anterior, recreé el mismo escenario usando ancho y alto completamente dinámicos:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

Si quieres que esté centrado, puedes hacerlo también:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Población:

jsFiddle: Centrado horizontalmente solamente
jsFiddle: Centrado tanto horizontal como verticalmente
El crédito original es para el usuario aaronk6 por señalarme a mí en esta respuesta


347
2017-07-22 17:55



En realidad, esto es posible y la respuesta aceptada solo trata de la centralización, lo cual es bastante sencillo. Además, realmente no necesita usar JavaScript.

Esto te permitirá lidiar con cualquier situación:

Configure todo como lo haría si desea posicionar: absoluto dentro de una posición: contenedor relativo, y luego crear una nueva posición fija div dentro de la div con position: absolute, pero haz no establecer sus propiedades superior e izquierda. Luego se fijará donde lo desee, en relación con el contenedor.

Por ejemplo:

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}
<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

Tristemente, esperaba que este hilo pudiera resolver mi problema con Android WebKit la representación de la sombra de cuadro desenfoca los píxeles como márgenes en los elementos de posición fijos, pero parece que es un error.
De todos modos, espero que esto ayude!


152
2017-08-06 18:34



Sí, de acuerdo con las especificaciones, hay una manera.

Si bien estoy de acuerdo en que Graeme Blackwood debe ser la respuesta aceptada, ya que prácticamente resuelve el problema, se debe tener en cuenta que un elemento fijo poder estar ubicado relativamente a su contenedor.

Noté por accidente que cuando aplicaba

-webkit-transform: translateZ(0);

para el cuerpo, hizo un niño fijo con relación a él (en lugar de la ventana gráfica). Entonces mis elementos fijos left y top las propiedades ahora eran relativas al contenedor.

Así que investigué y descubrí que el problema ya había sido cubierto por Eric Meyer e incluso si se sintió como un "truco", resulta que esto es parte de las especificaciones:

Para los elementos cuyo diseño se rige por el modelo de caja CSS, cualquier valor   que no sea ninguno para la transformación da como resultado la creación de un   contexto de apilamiento y un bloque contenedor. El objeto actúa como un   bloque que contiene para descendientes posicionados fijos.

http://www.w3.org/TR/css3-transforms/

Entonces, si aplica cualquier transformación a un elemento padre, se convertirá en el bloque contenedor.

Pero...

El problema es que la implementación parece fallida / creativa, porque los elementos también dejan de comportarse como fijos (incluso si este bit no parece ser parte de la especificación).

El mismo comportamiento se encontrará en Safari, Chrome y Firefox, pero no en IE11 (donde el elemento fijo seguirá siendo fijo).

Otra cosa interesante (indocumentada) es que cuando un elemento fijo está contenido dentro de un elemento transformado, mientras que top y left propiedades ahora estarán relacionadas con el contenedor, respetando el box-sizing propiedad, su contexto de desplazamiento se extenderá sobre el borde del elemento, como si el tamaño del cuadro estuviera configurado para border-box. Para algunos creativos por ahí, esto podría convertirse en un juguete :)

PRUEBA


115
2018-04-08 17:42



La respuesta es sí, siempre y cuando no establezcas left: 0 o right: 0 después de establecer la posición div a fijo.

http://jsfiddle.net/T2PL5/85/

Pagar la barra lateral div. Es fijo, pero está relacionado con el padre, no con el punto de vista de la ventana.

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>

53
2018-03-21 22:39



Creé este plugin de jQuery para resolver un problema similar al que tenía cuando tenía un contenedor centrado (datos tabulares), y quería que el encabezado se fijara en la parte superior de la página cuando se desplazaba la lista, pero quería anclarlo. los datos tabulares de modo que estén donde coloque el contenedor (centrado, izquierdo, derecho) y también permitan que se muevan hacia la izquierda y hacia la derecha con la página cuando se desplazan horizontalmente.

Aquí está el enlace a este plugin jQuery que puede resolver este problema:

https://github.com/bigspotteddog/ScrollToFixed

La descripción de este complemento es la siguiente:

Este complemento se usa para fijar elementos en la parte superior de la página, si el elemento se hubiera desplazado fuera de la vista, verticalmente; sin embargo, permite que el elemento continúe moviéndose hacia la izquierda o hacia la derecha con el desplazamiento horizontal.

Dada una opción marginTop, el elemento dejará de moverse verticalmente hacia arriba una vez que el desplazamiento vertical haya alcanzado la posición objetivo; pero, el elemento se moverá horizontalmente mientras la página se desplaza hacia la izquierda o hacia la derecha. Una vez que la página se ha desplazado hacia atrás, ha pasado a la posición objetivo, el elemento se restaurará a su posición original en la página.

Este complemento ha sido probado en Firefox 3/4, Google Chrome 10/11, Safari 5 e Internet Explorer 8/9.

Uso para su caso particular:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

18
2017-08-29 17:25



Solo saca los estilos superior e izquierdo de la div posición fija. Aquí hay un ejemplo

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

El #content div se sentará donde esté el div principal, pero se arreglará allí.


17
2018-03-28 14:23



Tienes position: sticky esa es una nueva forma de posicionar elementos y es conceptualmente similar a position: fixed. La diferencia es que un elemento con position: sticky se comporta como position: relative dentro de su padre, hasta que se cumpla un umbral de compensación determinado en la ventana gráfica.

En la posición de Chrome 56 (actualmente en beta desde diciembre de 2016, estable en enero de 2017): sticky ya ha vuelto.

https://developers.google.com/web/updates/2016/12/position-sticky

Más detalles están en ¡Pon tus aterrizajes! posición: tierras pegajosas en WebKit.


16
2018-04-19 08:41



Tuve que hacer esto con un anuncio que mi cliente quería sentarse fuera del área de contenido. ¡Simplemente hice lo siguiente y funcionó como un amuleto!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

12
2018-04-30 13:55