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?

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

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!

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

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>

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 .

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.

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í.

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();
});

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>

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.

Puede probar mi complemento jQuery, FixTo .

Uso:

$('#mydiv').fixTo('#centeredContainer');

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.

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');
});

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.

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/

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;
}

/* 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%);
}

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í .

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.

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

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?

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

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>