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

Esto te permitirá lidiar con cualquier escenario:

Configure todo como lo haría si desea position: absolute dentro de un contenedor position: relative, y luego cree un nuevo div de posición fija dentro del div con position: absolute, pero no establezca sus propiedades superior e izquierda. Luego se arreglará donde quieras 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 podría resolver mi problema con Android WebKit cuadro de representación-píxeles de desenfoque de sombra como márgenes en elementos de posición fija, pero parece que es un error.
De todos modos, espero que esto ayude!

Sí, según las especificaciones, hay una manera.

Si bien estoy de acuerdo en que la respuesta de Graeme Blackwood debería ser aceptada, porque prácticamente resuelve el problema, cabe señalar que un elemento fijo puede colocarse relativamente a su contenedor.

Me di cuenta por accidente que al aplicar

-webkit-transform: translateZ(0);

Para el cuerpo, hizo un hijo fijo relativo a él (en lugar de la ventana). Así que mis propiedades de elementos fijos left y top ahora eran relativas al contenedor.

Así que investigué un poco, y descubrí que el problema ya había sido cubierto por Eric Meyer 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 caja CSS, cualquier valor que no sea ninguno para los resultados de transformación en la creación de tanto un apilamiento de contexto y un bloque contenedor. El objeto actúa como un bloque de contención para posición fija descendencia.

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

Por lo tanto, 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 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 fijo elemento seguirá siendo fijo).

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

ENSAYO

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

Http://jsfiddle.net/T2PL5/85 /

Comprueba el div de la barra lateral. Es fijo, pero 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>

Tienes position: sticky que 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 cumple un umbral de desplazamiento dado en la ventana.

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

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

Más detalles están en Pegue su ¡aterrizajes! posición: tierra pegajosa en WebKit.

He creado este plugin de jQuery para resolver un problema similar que estaba teniendo donde 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, sin embargo, quería anclado a los datos tabulares para que estuviera donde quiera que pusiera el contenedor (centrado, izquierdo, derecho) y también le permitiera moverse a la izquierda y a la derecha con la página cuando se desplazaba horizontalmente.

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

Https://github.com/bigspotteddog/ScrollToFixed

La descripción de este plugin 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 el objetivo posición; pero, el elemento seguirá moviéndose horizontalmente a medida que la página se desplace hacia la izquierda o hacia la derecha. Una vez que la página se haya desplazado hacia abajo pasando la posición de destino, el elemento se restaurará a su posición original en la página.

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

Simplemente saque los estilos superior e izquierdo del div de posición fija. Este es 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 div #content será sit donde se encuentre el div padre, pero se arreglará allí.

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 encanto!

<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 indicado, una clave no está configurando ninguna configuración posicional en el elemento fixed (no top, right, bottom, o left valores).

Más bien, ponemos todos los elementos (observe cómo la última caja tiene cuatro de ellos) primero en la caja de la que se van a colocar, así:

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

Luego usamos margin-top y margin-left para "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 elementos fixedignoran todos los demás elementos de diseño, el contenedor final en nuestro violín puede tener múltiples elementos fixed, 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 dispersan dentro del contenido del contenedor, el posicionamiento se vuelve poco confiable.

Si la envoltura es estática, relativo, o absoluto en el posicionamiento, no importa.

Puede usar la propiedad position: sticky.

Aquí hay un ejemplo CODEPEN que demuestra el uso y también cómo difiere de position: fixed.

Cómo se comporta se explica a continuación:

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

2. Afecta el flujo de otros elementos en la página ie ocupa un espacio específico en la página(al igual que position: relative).

3. Si se define dentro de algún contenedor, se posiciona con respecto a ese contenedor. Si el contenedor tiene algún desbordamiento(desplazamiento), dependiendo del desplazamiento se convierte en position:fixed.

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

Puedes probar mi plugin 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 vista de su contenedor y no a toda la página.

Con CSS puro no puedes hacerlo; al menos yo no lo he hecho. Sin embargo, puedes hacerlo con jQuery de forma muy sencilla. Te explicaré mi problema, y con un pequeño cambio puedes usarlo.

Así que 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 padre (porque el elemento padre está centrado). Para establecer el componente izquierdo, simplemente coloque su elemento en el elemento padre y establezca position:relative para el elemento padre.

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

En mi caso son 150 píxeles de top static. Así que cuando ves 150 es cuánto es el elemento de la parte superior cuando no hemos desplazado.

CSS

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

$(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á EN RELACIÓN con el elemento que lo encierra (el div con" position:relative;") EN LUGAR de en relación con 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>

Anterior me permitió localizar un cierre "X" botón en la parte superior de una gran cantidad de texto en un div con desplazamiento vertical. La" X " se sienta en su lugar (no se mueve con desplazamiento texto y, sin embargo, se mueve a la izquierda o a la derecha con el contenedor div adjunto cuando el usuario cambia el tamaño del ancho de la ventana del navegador! Por lo tanto, es "fijo" verticalmente, pero posicionado en relación con el elemento que encierra horizontalmente!

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

Disculpas por no proporcionar mi función javascript hideDiv (), pero haría innecesariamente este post más largo. Opté por mantenerlo tan corto como posible.

He creado 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);
}

$('.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 del div fix y en relación con otro div, nuestra solución es usar un contenedor padre envolver el div fix y el div scroll.

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

Css

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

.fix {
  prosition:absolute;
}

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

Tendrá que 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 utiliza JavaScript. En este caso, el plugin jQuerySticky-Kit:

Mi proyecto es.NET Asp Core 2 MVC Angular 4 template con Bootstrap 4. Agregar "sticky-top" en el componente principal de la aplicación html (es decir, app.componente.html) en la primera fila trabajada, 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?

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

Comprueba 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>