Posición fija pero relativa al contenedor

639

Estoy tratando de solucionar un problema divpara que siempre se quede en la parte superior de la pantalla, usando:

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

Sin embargo, divestá dentro de un contenedor centrado. Cuando lo uso position:fixed, corrige el divrelativo a la ventana del navegador, como está en el lado derecho del navegador. En cambio, se debe arreglar en relación con el contenedor.

Sé que position:absolutese puede usar para arreglar un elemento relativo al div, pero cuando se desplaza hacia abajo en la página, el elemento desaparece y no se pega en la parte superior como con position:fixed.

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

Zach Nicodemous
fuente
"Tether es una biblioteca de interfaz de usuario de bajo nivel que se puede utilizar para colocar cualquier elemento en una página junto a cualquier otro elemento". github.com/shipshapecode/tether + Demos / Docs en tether.io
Kai Noack

Respuestas:

408

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

Respuesta larga: El problema con el uso de posicionamiento "fijo" es que saca el elemento del flujo . por lo tanto, no se puede reubicar 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 usarlo translateX(-50%). Esto no funciona con el truco de margen anterior porque no sabe cuánto compensarlo a menos que el ancho sea fijo y no puede usar valores relativos (como 50%) porque será relativo al padre y no al elemento que es aplicado a. transformse comporta de manera diferente. Sus valores son relativos al elemento al que se aplican. Por lo tanto, 50%para transformsignifica la mitad del ancho del elemento, mientras que 50%para el margen es la mitad del ancho del padre. Esta es una solución IE9 +

Usando un código similar al ejemplo anterior, recreé el mismo escenario usando un ancho y una altura 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 solo
jsFiddle: Centrado tanto horizontal como verticalmente
El crédito original va al usuario aaronk6 por señalarlo en esta respuesta

Joseph Marikle
fuente
Funcionó muy bien para mí. Aunque necesitaba el mío a la izquierda del div ya no centrado y sin fijar, así que solo tuve que disminuir el margen izquierdo hasta que estuviera alineado. No queda alineado sin importar el ancho de las ventanas. Gracias. +1
Iain M Norman
99
@Joseph alguna idea de por qué position:fixedsin especificar topo a left veces funciona? Algunos navegadores parecen predeterminar el elemento a donde normalmente estaría, si tuviera un posicionamiento normal. stackoverflow.com/questions/8712047/…
Flash
2
¿Qué pasa sin altura y ancho fijos? En mi caso, no he dado ningún ancho de señal a ningún contenedor, incluso hasta la etiqueta del cuerpo. Qué solución me dirás que haga.
mfq
1
@mfq Desafortunadamente, este método no funcionará sin una altura y ancho conocidos. Lo que elija dependerá en gran medida de lo que intente centrar. Si es una imagen, simplemente úsela como fondo de un contenedor 100% x 100%. Si es un elemento real que es completamente dinámico, probablemente tendrá que explorar usando una solución de JavaScript para obtener las dimensiones.
Joseph Marikle
2
Descubrí que agregar left:inherital elemento de posición fija puede obligar al navegador a respetar el desplazamiento de los padres.
Willster
181

En realidad, esto es posible y la respuesta aceptada solo trata de la centralización, que es lo suficientemente sencilla. Además, realmente no necesitas usar JavaScript.

Esto te permitirá lidiar con cualquier escenario:

Configure todo como lo haría si desea posicionar: absoluto dentro de una posición: contenedor relativo, y luego cree una nueva posición fija div dentro del div con position: absolute, pero no establezca sus propiedades superior e izquierda. Luego se reparará 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>

Lamentablemente, esperaba que este hilo resuelva mi problema con WebKit de Android que representa píxeles de desenfoque de sombra de cuadro como márgenes en elementos de posición fijos, pero parece que es un error.
De todos modos, ¡espero que esto ayude!

Graeme Blackwood
fuente
1
No es CUALQUIER escenario, pero es un buen comienzo. Si hay mucho espacio debajo de .wrapper, entonces su .fixed-wrapper terminará en la parte inferior del padre pero su elemento .fixed continuará fluyendo desde ambos contenedores hacia cualquier contenido a continuación. Como dije, es un buen comienzo, no perfecto, pero no veo cómo esto se puede lograr sin algunos js.
o_O
44
Sin embargo, esto no funciona bien con un diseño fluido.
Zuhaib Ali
3
Traté de hacer esto, pero a medida que me desplazo hacia abajo, el encabezado que había aplicado fijo (con el padre absoluto con el que el padre era relativo) no se movía al desplazarme.
Mirage
Esto funcionó para mí con un div superior derecho en Chromium y Firefox, excepto que las posiciones verticales del div fijo eran diferentes (en Chromium estaba encima del div principal, en Firefox estaba dentro).
Damien
2
¡Esta fue la respuesta para mí! Gracias @Graeme Blackwood
Tabu.Net
136

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, debe tenerse en cuenta que un elemento fijo se puede colocar relativamente en su contenedor.

Noté por accidente que al aplicar

-webkit-transform: translateZ(0);

para el cuerpo, hizo un niño fijo relativo a él (en lugar de la ventana gráfica). Entonces mis elementos fijos lefty toppropiedades ahora eran relativos al contenedor.

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

Para los elementos cuyo diseño se rige por el modelo de cuadro 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 contenedor 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 defectuosa / creativa, porque los elementos también dejan de comportarse como arreglados (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).

Otro interesante (no documentado) es que cuando un elemento fijo está contenido dentro de un elemento transformado, mientras que sus topy leftpropiedades ahora estarán relacionados con el contenedor, respetando la box-sizingpropiedad, su contexto de desplazamiento se extenderá sobre el borde del elemento, como casilla si -tamaño se estableció en border-box. Para algunos creativos, esto podría convertirse en un juguete :)

PRUEBA

Francesco Frapporti
fuente
44
Esto me permitió crear una tabla con encabezados fijos dentro de un contenedor
Zach Saucier
Bien, esto funciona para mí en Chrome. ¿Alguna idea sobre cómo lograr lo mismo en IE? He intentado usar translateZ pero no lo hizo en ninguna versión de IE.
Anish Patel
Lo mismo ... ¿Alguien sabe cómo hacer esto en IE? es un poco molesto detectar el navegador, luego mostrarlo o no mostrarlo sistemáticamente left:(teniendo en cuenta que eso lo estropea)
Tallboy
Solo cumplo con la condición opuesta que necesito arreglar en un contenedor relativo pero cambiado por la propiedad transform Su respuesta es muy útil, ¡gracias!
mytharcher
8
@Francesco Frapporti parece que esto ya no funciona ... en la última versión de Chrome de todos modos (Versión 42.0.2311.90) :(
jjenzz
60

La respuesta es sí, siempre que no establezca left: 0o right: 0después de establecer la posición div en fijo.

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

Verifique 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>
Shadow_boi
fuente
12
¿Alguna razón por la cual esto no recibe más votos a favor? Parece la solución más obvia para mí.
Seguimiento del
¿Qué pasa con la compatibilidad entre navegadores? ¿Alguno de ustedes revisó esto?
Alexandre Bourlier
3
Esto es correcto pero solo para el 'posicionamiento' del elemento fijo. No respetará el ancho del contenedor ni cambiará el tamaño de ninguna manera. Por ejemplo, si tiene una envoltura fluida con ancho máximo: 1000 px; margen: auto; Esto no funcionará. Si todo puede tener un ancho fijo, entonces sí, esto resolverá su problema.
Rhys
3
@AlexandreBourlier Sí, esto funcionó bien para mí para un elemento fijo en Chrome, Firefox e IE11 al menos.
Jason Frank
Funcionó a la perfección. Tuve que agregar margen izquierdo: X% para llevar el elemento a la derecha del contenedor
Anand
45

position: sticky esa es una nueva forma de posicionar elementos que es conceptualmente similar a position: fixed . La diferencia es que un elemento con se position: stickycomporta como position: relativedentro de su padre, hasta que se alcanza un umbral de desplazamiento determinado en la ventana gráfica.

En Chrome 56 (actualmente beta a diciembre de 2016, estable en enero de 2017) posición: adhesivo ahora está de vuelta.

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

¡Más detalles están en Stick your landings! posición: tierras pegajosas en WebKit .

PoseLab
fuente
Esto hace la vida mucho más fácil, el único problema es que no es compatible con Internet Explorer o Edge 15 y versiones anteriores.
ricks
1
position:stickyes genial. Compatible con todos los navegadores, excepto IE caniuse.com/#feat=css-sticky
Yarin
jajaja, tan viejo api, y me salvas el día ... lo estoy usando para columnas fijas para tablas flexibles.
Vladislav Gritsenko
1
"dentro de su padre": ¿es posible mantener el elemento adhesivo en la parte superior, si el padre desplazado hacia arriba se vuelve invisible?
Fikret
28

SOLUCIÓN 2019: puede usar la position: stickypropiedad.

Aquí hay un ejemplo de CODEPEN que demuestra el uso y también en qué se diferencia position: fixed.

A continuación se explica cómo se comporta:

  1. Un elemento con una posición fija se coloca en función de la posición de desplazamiento del usuario. Básicamente actúa como position: relativehasta que un elemento se desplaza más allá de un desplazamiento específico, en cuyo caso se convierte en posición: fijo. Cuando se desplaza hacia atrás, vuelve a su posición anterior (relativa).

  2. Efectúa el flujo de otros elementos en la página, es decir, ocupa un espacio específico en la página (al igual que position: relative).

  3. Si se define dentro de algún contenedor, se coloca con respecto a ese contenedor. Si el contenedor tiene algo de desbordamiento (desplazamiento), dependiendo del desplazamiento del desplazamiento se convierte en posición: fijo.

Entonces, si desea lograr la funcionalidad fija pero dentro de un contenedor, use adhesivo.

Pransh Tiwari
fuente
Buena solución position: stickyAún no lo sabía . Ayudó mucho, gracias!
dave0688
Estaba a punto de publicar esto. ¡Buena respuesta! pegajoso es el camino.
dkellner
Si aumenta el tamaño de la ventana de salida en Codepen, el elemento fijo no es fijo sino que se mueve hacia arriba. No está bien. Una mejor solución lo mantiene anclado en la parte inferior de la ventana gráfica.
AndroidDev
@AndroidDev Solo el elemento superior se define como fijo para toda la página. Se está prestando como se desea. Los otros elementos son ejemplos explicativos para diferentes casos.
Pransh Tiwari
18

Simplemente quite los estilos superior e izquierdo de la posición fija div. 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 sea que se encuentre el padre parent, pero se fijará allí.

hobberwickey
fuente
3
¿Por qué el menos? Esto funciona perfectamente para arreglar un elemento donde quieras en el flujo del DOM. deadlykitten.com/tests/fixedPositionTest.php
hobberwickey
18

He creado este complemento jQuery para resolver un problema similar 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 que se anclara a los datos tabulares para que estén donde coloque el contenedor (centrado, izquierda, derecha) y también permitan que se mueva hacia la izquierda y hacia la derecha con la página cuando se desplace horizontalmente.

Aquí está el enlace a este complemento 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 de destino; pero, el elemento aún se moverá horizontalmente a medida que la página se desplaza hacia la izquierda o hacia la derecha. Una vez que la página se ha desplazado hacia abajo y pasa la posición de destino, 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();
});
perro grande
fuente
12

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

<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>
Eric K
fuente
Mi anuncio tenía 140px de ancho, así que lo moví 150px a la izquierda para darle un poco de margen derecho contra el borde del marco del sitio web.
Eric K
7

Dos elementos HTML y CSS puro (navegadores modernos)

Vea este ejemplo de jsFiddle.Cambie el tamaño y vea cómo los elementos fijos incluso se mueven con los elementos flotantes en los que se encuentran. Use la barra de desplazamiento más interna para ver cómo funcionaría el desplazamiento en un sitio (los elementos fijos permanecen fijos).

Como muchos aquí han dicho, una de las claves es no seleccionar ningún ajuste de posición en el fixedelemento (no hay top, right, bottom, o leftvalores).

Más bien, colocamos todos los elementos fijos (observe cómo la última caja tiene cuatro de ellos) primero en la caja en la que se deben colocar, de esta manera:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

Luego usamos margin-topy margin-leftpara "moverlos" en relación con su contenedor, algo así como lo hace este CSS:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

Tenga en cuenta que debido a que los fixedelementos ignoran todos los demás elementos de diseño, el contenedor final en nuestro violín puede tener múltiples fixedelementos y aún tener todos esos elementos relacionados con la esquina superior izquierda. Pero esto solo es cierto si todos se colocan primero en el contenedor, ya que este violín de comparación muestra que si se dispersa dentro del contenido del contenedor, el posicionamiento se vuelve poco confiable .

Si el contenedor es estático , relativo o absoluto en posición, no importa.

ScottS
fuente
3

Puede probar mi complemento jQuery, FixTo .

Uso:

$('#mydiv').fixTo('#centeredContainer');
Burak
fuente
2

Otra solución extraña para lograr una posición fija relativa es convertir su contenedor en un iframe, de esa manera su elemento fijo se puede fijar a la ventana gráfica del contenedor y no a toda la página.

Beto Aveiga
fuente
2

Con CSS puro no puedes lograrlo; al menos no lo he hecho. Sin embargo, puedes hacerlo con jQuery de manera muy simple. Explicaré mi problema, y ​​con un pequeño cambio puedes usarlo.

Entonces, para empezar, quería que mi elemento tuviera una parte superior fija (desde la parte superior de la ventana) y un componente izquierdo para heredar del elemento principal (porque el elemento principal está centrado). Para establecer el componente izquierdo, simplemente coloque su elemento en el elemento primario y configúrelo position:relativepara el elemento principal.

Entonces necesita saber cuánto es desde arriba su elemento cuando la barra de desplazamiento está en la parte superior (y cero desplazado); Hay dos opciones de nuevo. Primero es que es estático (algún número) o tiene que leerlo desde el elemento padre.

En mi caso, son 150 píxeles de la estática superior. Entonces, cuando ves 150, es cuánto es el elemento desde la parte superior cuando no nos hemos desplazado.

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});
Sr. Br
fuente
El problema es que el div en cuestión parpadea cuando se desplaza.
vvohra87
Probablemente porque el desplazamiento es refrescante demasiado o demasiado rápido. No tuve ese problema tbh, pero puedo sugerirle que intente usar el "bloqueador" global que se actualizaría, por ejemplo, cada 10 ms o en algún momento, y establecer el valor de bloqueo cada vez que realice algún cambio de altura. Por supuesto, debe agregar la condición if al evento .scroll que verifica si en este período (10 ms) ya desplazó div. Repito que no lo he intentado, pero creo que podría funcionar :) De esta manera, podría evitar que div cambie su posición demasiado para que la computadora no pueda seguirlo, y lo suficiente como para que el ojo humano lo vea.
Sr. Br
Ya di tu respuesta +1 compañero;) El dolor de adjuntar un método de bucle global es realmente el rendimiento. Hacer que algo así funcione bien en PC y tabletas antiguas es doloroso. Muchas veces, un desarrollador junior en el trabajo ha escrito una 'var x' dentro de dicho método, lo que resulta en pérdidas de memoria innecesarias si la página se deja abierta demasiado tiempo: P Pero sí, su sugerencia parece ser la única opción real .
vvohra87
Tienes razón con los bucles globales; No es bueno, estoy de acuerdo. Solo me gusta pensar en este tipo de problemas, es por eso que escribí otra sugerencia :) Tbh, ahora buscándolo un poco mejor, lo evitaría xD Ahora tengo otra solución. Lo que dice sobre la configuración de setTimeout () en el evento de desplazamiento que llama a func. eso hace que el movimiento div ... también use el bloqueador global que se establece en verdadero mientras espera el tiempo de espera y cuando se llama el tiempo de espera, devuelve el bloqueador a falso que permite otra llamada después de un tiempo ... de esta manera no usaría el bucle global pero aún tengo control sobre la frecuencia del movimiento div.
Sr. Br
Es más elegante pero me cuesta aceptarlo. Este es el tipo de cosas que espero que las especificaciones html y css manejen tbh. ¡Odio el hecho de que js esté involucrado en primer lugar!
vvohra87
1

Esto es fácil (según HTML a continuación)

El truco es NO usar la parte superior o izquierda del elemento (div) con "position: fixed;". Si no se especifican, el elemento "contenido fijo" aparecerá RELATIVO al elemento que lo encierra (el div con "posición: relativo;") ¡EN LUGAR de la ventana del navegador!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

Lo anterior me permitió ubicar un botón de "X" de cierre en la parte superior de una gran cantidad de texto en un div con desplazamiento vertical. La "X" se coloca en su lugar (no se mueve con el texto desplazado y, sin embargo, se mueve hacia la izquierda o hacia la derecha con el contenedor div adjunto cuando el usuario cambia el tamaño del ancho de la ventana del navegador. Por lo tanto, se "fija" verticalmente, pero se coloca en relación con ¡El elemento envolvente horizontalmente!

Antes de que esto funcionara, la "X" se desplazaba hacia arriba y fuera de la vista cuando desplazaba el contenido del texto hacia abajo.

Disculpas por no proporcionar mi función javascript hideDiv (), pero innecesariamente haría que esta publicación sea más larga. Opté por mantenerlo lo más corto posible.

Bruce Allen
fuente
Solución sólida de navegador cruzado, funciona en IE8 como un encanto.
dmi3y
1

Creé un jsfiddle para demostrar cómo funciona esto usando transform.

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

Wen
fuente
1

Tengo el mismo problema, uno de los miembros de nuestro equipo me da una solución. Para permitir la posición de arreglo div y en relación con otro div, nuestra solución es usar un contenedor padre para envolver el div fijo y el div de desplazamiento.

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

css

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}
Jay0Lu
fuente
1
/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}
Carol McKay
fuente
1

Sí, es posible siempre y cuando no establezca la posición ( topo left, etc.) de su fixedelemento (sin embargo, aún puede usar marginpara establecer una posición relativa). Simon Bos publicó sobre esto hace un tiempo .

Sin embargo, no espere que el elemento fijo se desplace con parientes no fijos.

Vea una demostración aquí .

Javarome
fuente
0

Hice algo así hace un tiempo. Era bastante nuevo en JavaScript, así que estoy seguro de que puedes hacerlo mejor, pero aquí hay un punto de partida:

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

Necesitará establecer su ancho, y luego obtiene el ancho de la ventana y cambia el margen cada pocos segundos. Sé que es pesado, pero funciona.

webLacky3rdClass
fuente
Un problema que puedo ver con este enfoque es que se basa en un temporizador (2,5 segundos) y durante ese tiempo, si el usuario cambia el tamaño de la ventana, tardará hasta ese momento en corregirse. Eso no es lo mejor cuando se trata de la experiencia del usuario. Además, si se puede ayudar, intente utilizar oyentes de eventos en lugar de temporizadores.
Joseph Marikle
Como dije, es un script VIEJO, uno de los primeros, y no he tenido que volver a arreglarlo. Por lo tanto, no es el mejor, pero puede ser un buen punto de partida.
webLacky3rdClass
0

Es posible si usa JavaScript. En este caso, el plugin jQuery Sticky-Kit :

Paz Aricha
fuente
0

Mi proyecto es .NET ASP Core 2 MVC Angular 4 template con Bootstrap 4. Agregar "sticky-top" al componente principal de la aplicación html (es decir, app.component.html) en la primera fila funcionó, como sigue:

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

¿Es esa la convención o simplifiqué demasiado esto?

Adam Cox
fuente
0

Cuando usa la position:fixedregla CSS y trata de aplicar top/ left/ right/ bottomse posiciona el elemento en relación con la ventana.

Una solución alternativa es usar marginpropiedades en lugar de top/ left/ right/bottom

Sunil Garg
fuente
-1

Mira esto:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>
Kunal
fuente
55
No creo que esto esté logrando lo que el OP preguntó.
JasonWyatt