Estou tentando corrigir um, div
para que ele sempre fique na parte superior da tela, usando:
position: fixed;
top: 0px;
right: 0px;
No entanto, o div
está dentro de um contêiner centrado. Quando eu uso, position:fixed
ele corrige o div
parente 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:absolute
pode 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?
css
position
css-position
fixed
Zach Nicodemous
fonte
fonte
Respostas:
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:
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 (como50%
) porque será relativo ao pai e não ao elemento que é aplicado a.transform
se comporta de maneira diferente. Seus valores são relativos ao elemento ao qual são aplicados. Assim,50%
paratransform
significa metade da largura do elemento, enquanto que50%
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:
Se você deseja que seja centralizado, também pode fazer isso:
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
fonte
position:fixed
sem especificartop
ouleft
às vezes funciona? Alguns navegadores parecem padronizar o elemento para onde ele normalmente estaria, se tivesse um posicionamento normal. stackoverflow.com/questions/8712047/…left:inherit
ao elemento de posição fixa pode forçar o navegador a respeitar o deslocamento do pai.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:
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!
fonte
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
para o corpo, ele criou um filho fixo em relação a ele (em vez da janela de exibição). Portanto, meus elementos
left
etop
propriedades 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:
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
top
eleft
agora estarão relacionadas ao contêiner, respeitando abox-sizing
propriedade, seu contexto de rolagem se estenderá sobre a borda do elemento, como se a caixa -sizing foi definido comoborder-box
. Para alguns criativos por aí, isso pode se tornar um brinquedo :)TESTE
fonte
left:
(considerando que messes-lo)A resposta é sim, desde que você não defina
left: 0
ouright: 0
depois 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.
fonte
position: sticky
essa é uma nova maneira de posicionar elementos conceitualmente semelhantes aposition: fixed
. A diferença é que um elementoposition: sticky
se comporta comoposition: relative
dentro 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 .
fonte
position:sticky
é ótimo. Compatível com todos os navegadores, exceto o IE caniuse.com/#feat=css-sticky2019 SOLUÇÃO: Você pode usar a
position: sticky
propriedade.Aqui está um exemplo de CODEPEN demonstrando o uso e também como ele difere
position: fixed
.Como se comporta é explicado abaixo:
Um elemento com posição de aderência é posicionado com base na posição de rolagem do usuário. Ele basicamente age como
position: relative
até 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).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
).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.
fonte
position: sticky
. Ajudou muito, obrigado!Apenas retire os estilos superior e esquerdo da div da posição fixa. Aqui está um exemplo
A div #content ficará onde quer que a div pai esteja, mas será corrigida lá.
fonte
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:
fonte
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!
fonte
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
fixed
elemento (hátop
,right
,bottom
, ouleft
valores).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:
Em seguida, usamos
margin-top
emargin-left
"movemos" eles em relação ao contêiner, algo como este CSS:Observe que, como os
fixed
elementos ignoram todos os outros elementos de layout, o contêiner final em nosso violino pode ter váriosfixed
elementos 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.
fonte
Você pode tentar o meu plugin jQuery, FixTo .
Uso:
fonte
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.
fonte
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:relative
o 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
jQuery
fonte
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 !!!
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.
fonte
Eu criei um jsfiddle para demonstrar como isso funciona usando a transformação.
HTML
CSS
jQuery
https://jsfiddle.net/bx6ktwnn/1/
fonte
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.
css
fonte
fonte
Sim, é possível desde que você não defina a posição (
top
ouleft
etc.) do seufixed
elemento (você ainda pode usarmargin
para 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 .
fonte
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:
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.
fonte
É possível se você usar JavaScript. Nesse caso, o plugin Sticky-Kit do jQuery :
fonte
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:
Essa é a convenção ou simplifiquei demais isso?
fonte
Quando você usa a
position:fixed
regra CSS e tenta aplicartop
/left
/right
/bottom
it, posicione o elemento em relação à janela.Uma solução alternativa é usar
margin
propriedades em vez detop
/left
/right
/bottom
fonte
Verifique isto:
fonte