Estou tentando corrigir um, divpara que ele sempre fique na parte superior da tela, usando:

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

No entanto, o divestá dentro de um contêiner centrado. Quando eu uso, position:fixedele corrige o divparente da janela do navegador, como no lado direito do navegador. Em vez disso, ele deve ser corrigido em relação ao contêiner.

Eu sei que isso position:absolutepode ser usado para corrigir um elemento em relação ao div, mas quando você rola a página, o elemento desaparece e não fica no topo, como acontece com position:fixed.

Existe um hack ou solução alternativa para conseguir isso?

Resposta curta: não. (Agora é possível com a transformação CSS. Veja a edição abaixo)

Resposta longa: O problema ao usar o posicionamento "fixo" é que ele retira o elemento do fluxo . portanto, não pode ser reposicionado em relação ao pai, porque é como se não tivesse um. Se, no entanto, o contêiner tiver uma largura fixa e conhecida, você poderá 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 é uma informação desatualizada. Agora é possível centralizar o conteúdo de um tamanho dinâmico (horizontal e verticalmente) com a ajuda da mágica da transformação CSS3. O mesmo princípio se aplica, mas em vez de usar a margem para compensar seu contêiner, você pode usá-lo translateX(-50%). Isso não funciona com o truque de margem acima, porque você não sabe quanto compensar, a menos que a largura seja fixa e você não possa usar valores relativos (como 50%) porque será relativo ao pai e não ao elemento que é aplicado a. transformse comporta de maneira diferente. Seus valores são relativos ao elemento ao qual são aplicados. Assim, 50%para transformsignifica metade da largura do elemento, enquanto que 50%para margem é metade da largura do pai. Esta é uma solução IE9 +

Usando código semelhante ao exemplo acima, recriei o mesmo cenário usando largura e altura completamente dinâmicas:

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

Se você deseja que seja centralizado, também pode fazer isso:

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

Demonstrações:

jsFiddle: centralizado horizontalmente apenas
jsFiddle: centralizado horizontal e verticalmente
O crédito original é enviado ao usuário aaronk6 por apontar para mim nesta resposta

Na verdade, isso é possível e a resposta aceita lida apenas com a centralização, que é direta o suficiente. Além disso, você realmente não precisa usar JavaScript.

Isso permitirá que você lide com qualquer cenário:

Configure tudo como faria se você deseja posicionar: absoluto dentro de uma posição: contêiner relativo e, em seguida, crie uma nova posição fixa div dentro da div com position: absolute, mas não defina suas propriedades superior e esquerda. Ele será corrigido onde você quiser, em relação ao contêiner.

Por exemplo:

/* 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>

Infelizmente, eu esperava que esse tópico resolvesse meu problema com os pixels de desfoque de sombra de caixa de renderização do WebKit do Android como margens em elementos de posição fixa, mas parece que é um bug.
Enfim, espero que isso ajude!

Sim, de acordo com as especificações, existe um caminho.

Enquanto eu concordo que Graeme Blackwood deve ser a resposta aceita, porque praticamente resolve o problema, note-se que um elemento fixo pode ser posicionado relativamente ao seu contêiner.

Notei por acidente que, ao aplicar

-webkit-transform: translateZ(0);

para o corpo, ele criou um filho fixo em relação a ele (em vez da janela de exibição). Portanto, meus elementos lefte toppropriedades fixos agora eram relativos ao contêiner.

Então, fiz uma pesquisa e descobri que o problema já havia sido coberto por Eric Meyer e, mesmo que parecesse um "truque", verifica-se que isso faz parte das especificações:

Para elementos cujo layout é governado pelo modelo de caixa CSS, qualquer valor diferente de nenhum para a transformação resulta na criação de um contexto de empilhamento e de um bloco contendo. O objeto atua como um bloco de contenção para descendentes posicionados fixos.

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

Portanto, se você aplicar alguma transformação a um elemento pai, ele se tornará o bloco que contém.

Mas...

O problema é que a implementação parece defeituosa / criativa, porque os elementos também param de se comportar como corrigidos (mesmo que esse bit não pareça fazer parte da especificação).

O mesmo comportamento será encontrado no Safari, Chrome e Firefox, mas não no IE11 (onde o elemento fixo ainda permanecerá fixo).

Outra coisa interessante (não documentada) é que quando um elemento fixo está contido dentro de um elemento transformado, enquanto suas propriedades tope leftagora estarão relacionadas ao contêiner, respeitando a box-sizingpropriedade, seu contexto de rolagem se estenderá sobre a borda do elemento, como se a caixa -sizing foi definido como border-box. Para alguns criativos por aí, isso pode se tornar um brinquedo :)

TESTE

A resposta é sim, desde que você não defina left: 0ou right: 0depois de definir a posição div como fixa.

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

Faça o check-out da div da barra lateral. É fixo, mas relacionado ao pai, não ao ponto de vista da janela.

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: stickyessa é uma nova maneira de posicionar elementos conceitualmente semelhantes a position: fixed. A diferença é que um elemento position: stickyse comporta como position: relativedentro de seu pai, até que um determinado limite de deslocamento seja atingido na janela de exibição.

Na posição do Chrome 56 (atualmente beta em dezembro de 2016, estável em janeiro de 2017): sticky está de volta.

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

Mais detalhes estão em Stick your landing! position: terras pegajosas no WebKit .

2019 SOLUÇÃO: Você pode usar a position: stickypropriedade.

Aqui está um exemplo de CODEPEN demonstrando o uso e também como ele difere position: fixed.

Como se comporta é explicado abaixo:

1. Um elemento com posição de aderência é posicionado com base na posição de rolagem do usuário. Ele basicamente age como position: relativeaté que um elemento seja rolado além de um deslocamento específico; nesse caso, ele se transforma na posição: fixo. Quando é rolado para trás, volta à sua posição anterior (relativa).

2. Isso afeta o fluxo de outros elementos na página, ou seja, ocupa um espaço específico na página (assim como position: relative).

3. Se for definido dentro de algum contêiner, será posicionado em relação a esse contêiner. Se o contêiner estiver com excesso (rolagem), dependendo do deslocamento da rolagem, ele se transformará na posição: fixo.

Portanto, se você deseja obter a funcionalidade fixa, mas dentro de um contêiner, use adesivo.

Apenas retire os estilos superior e esquerdo da div da posição fixa. Aqui está um exemplo

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

A div #content ficará onde quer que a div pai esteja, mas será corrigida lá.

Eu criei este plugin jQuery para resolver um problema semelhante que eu estava tendo em um contêiner centralizado (dados tabulares) e queria que o cabeçalho fosse corrigido na parte superior da página quando a lista fosse rolada, mas queria que ele estivesse ancorado em os dados tabulares para que estejam onde eu coloco o contêiner (centralizado, esquerdo, direito) e também permitimos que ele se mova para a esquerda e direita com a página quando rolada horizontalmente.

Aqui está o link para este plugin jQuery que pode resolver esse problema:

https://github.com/bigspotteddog/ScrollToFixed

A descrição deste plugin é a seguinte:

Este plug-in é usado para fixar elementos na parte superior da página, se o elemento tivesse rolado fora da vista, verticalmente; no entanto, ele permite que o elemento continue se movendo para a esquerda ou direita com a rolagem horizontal.

Dada a opção marginTop, o elemento irá parar de se mover verticalmente para cima quando a rolagem vertical atingir a posição de destino; mas, o elemento ainda se moverá horizontalmente à medida que a página for rolada para a esquerda ou direita. Depois que a página for rolada de volta para baixo na posição de destino, o elemento será restaurado para sua posição original na página.

Este plug-in foi testado no Firefox 3/4, Google Chrome 10/11, Safari 5 e Internet Explorer 8/9.

Uso para o seu 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();
});

Eu tive que fazer isso com um anúncio que meu cliente queria ficar fora da área de conteúdo. Eu simplesmente fiz o seguinte e funcionou como um 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>

Dois elementos HTML e CSS puro (navegadores modernos)

Veja este exemplo do jsFiddle. Redimensione e veja como os elementos fixos se movem com os elementos flutuantes em que estão. Use a barra de rolagem mais interna para ver como o rolagem funcionaria em um site (os elementos fixos permanecem fixos).

Como muitos aqui afirmaram, uma chave não está definindo todas as configurações de posição sobre o fixedelemento (há top, right, bottom, ou leftvalores).

Em vez disso, colocamos todos os elementos fixos (observe como a última caixa tem quatro deles) primeiro na caixa em que devem ser posicionados, da seguinte forma:

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

Em seguida, usamos margin-tope margin-left"movemos" eles em relação ao contêiner, algo como este CSS:

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

Observe que, como os fixedelementos ignoram todos os outros elementos de layout, o contêiner final em nosso violino pode ter vários fixedelementos e ainda ter todos esses elementos relacionados ao canto superior esquerdo. Mas isso só é verdade se todos eles forem colocados primeiro no contêiner, pois esse violino de comparação mostra que, se disperso no conteúdo do contêiner, o posicionamento se torna não confiável .

Se o wrapper é estático , relativo ou absoluto no posicionamento, isso não importa.

Você pode tentar o meu plugin jQuery, FixTo .

Uso:

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

Outra solução estranha para alcançar uma posição fixa relativa é converter seu contêiner em um iframe, para que seu elemento fixo possa ser corrigido na janela de visualização do contêiner e não na página inteira.

Com CSS puro, você não consegue fazer isso; pelo menos eu não tenho. No entanto, você pode fazer isso com o jQuery de maneira muito simples. Vou explicar o meu problema e, com uma pequena alteração, você pode usá-lo.

Então, para começar, eu queria que meu elemento tivesse um topo fixo (da parte superior da janela) e um componente esquerdo para herdar do elemento pai (porque o elemento pai está centralizado). Para definir o componente esquerdo, basta colocar seu elemento no pai e definir position:relativeo elemento pai.

Então você precisa saber quanto de cima seu elemento está quando a barra de rolagem está no topo (y zero rolado); existem duas opções novamente. Primeiro é que é estático (algum número) ou você deve lê-lo no elemento pai.

No meu caso, são 150 pixels da parte superior estática. Então, quando você vê 150, é quanto custa o elemento do topo quando não rolamos.

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

Isso é fácil (conforme HTML abaixo)

O truque é NÃO usar a parte superior ou esquerda do elemento (div) com "position: fixed;". Se estes não forem especificados, o elemento "conteúdo fixo" aparecerá RELATIVO ao elemento envolvente (a div com "posição: relativa;") EM VEZ DE relativo à janela do 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>

Acima, foi possível localizar um botão "X" de fechamento na parte superior de muito texto em uma div com rolagem vertical. O "X" fica no lugar (não se move com o texto rolado e, no entanto, se move para a esquerda ou para a direita com o contêiner div incluído quando o usuário redimensiona a largura da janela do navegador! Portanto, é "fixo" na vertical, mas posicionado em relação a o elemento de fechamento horizontalmente!

Antes de começar a trabalhar, o "X" rolava para cima e para fora da vista quando rolava o conteúdo do texto para baixo.

Desculpas por não fornecer minha função hideDiv () do javascript, mas desnecessariamente tornaria esta postagem mais longa. Optei por mantê-lo o mais curto possível.

Eu criei um jsfiddle para demonstrar como isso funciona usando a transformação.

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/

Eu tenho o mesmo problema, um dos membros da nossa equipe me fornece uma solução. Para permitir a posição de correção div e em relação a outras div, nossa solução é usar um contêiner pai que envolve a correção div e rolar div.

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

Sim, é possível desde que você não defina a posição ( topou leftetc.) do seu fixedelemento (você ainda pode usar marginpara definir uma posição relativa). Simon Bos postou sobre isso há um tempo atrás .

No entanto, não espere que o elemento fixo role com parentes não fixos.

Veja uma demonstração aqui .

Eu fiz algo assim por algum tempo. Eu era muito novo no JavaScript, então tenho certeza que você pode fazer melhor, mas aqui está um ponto 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)
}

Você precisará definir sua largura e, em seguida, ela obtém a largura da janela e altera a margem a cada poucos segundos. Eu sei que é pesado, mas funciona.

É possível se você usar JavaScript. Nesse caso, o plugin Sticky-Kit do jQuery :

Meu projeto é o modelo .NET ASP Core 2 MVC Angular 4 do .NET com Bootstrap 4. A adição de "sticky-top" ao componente principal do aplicativo html (por exemplo, app.component.html) na primeira linha funcionou da seguinte forma:

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

Essa é a convenção ou simplifiquei demais isso?

Quando você usa a position:fixedregra CSS e tenta aplicar top/ left/ right/ bottomit, posicione o elemento em relação à janela.

Uma solução alternativa é usar marginpropriedades em vez de top/ left/ right/bottom

Verifique isto:

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