O CSS possui dois atributos básicos mais importantes que os desenvolvedores de front-end devem dominar: display e position.
displayO atributo especifica o layout da página da web. Dois layouts importantes, layout flexívelflex e layout de gradegrid .
Este artigo descreve positionpropriedades muito úteis . Espero que, após 10 minutos de leitura, o ajude a entender facilmente o posicionamento da página da Web e a explicar como o navegador calcula a posição dos elementos da página da Web, especialmente o stickyposicionamento recém-introduzido .
Primeiro, o papel do atributo position
positionOs atributos são usados para especificar a posição de um elemento em uma página da Web. Existem cinco métodos de posicionamento, ou seja, o positionatributo possui cinco valores principais.
estático
relativo
fixo
absoluto
pegajoso
Os cinco valores são apresentados sucessivamente abaixo. O último só stickyé suportado pelo navegador em 2017, este artigo se concentrará na introdução.
Segundo, o valor do atributo estático
staticÉ positiono valor padrão do atributo. Se o positionatributo for omitido , o navegador considerará o elemento a ser staticposicionado.
Neste momento, o navegador determinará a posição de cada elemento na ordem do código-fonte, chamado "fluxo normal" (fluxo normal).
Cada elemento no nível do bloco ocupa seu próprio bloco e não há sobreposição entre os elementos.Esta posição é a posição padrão do elemento.
Note-se que a staticposição de elemento como um resultado de posicionamento, o navegador é discricionária, por isso, quando top, bottom, left, rightestas quatro propriedades é inválido.
、 、 Relativo ， absoluto ， fixo
relative, absolute, fixedEstas três propriedades têm uma coisa em comum, são posicionados em relação a um certo ponto, os únicos mentiras diferença nos diferentes pontos de base. Portanto, desde que você entenda quais são seus pontos básicos, é fácil entender os três valores de atributo.
Nenhuma dessas três posições afetará a posição de outros elementos; portanto, pode haver sobreposição entre os elementos.
3.1 valor do atributo relativo
relativeRepresenta, em relação a uma posição padrão (isto é, staticde posição) é deslocado, isto é, a posição padrão do elemento de posicionamento é um ponto de base.
Ele deve ser usado com top, bottom, left, rightpara uso com esses quatro atributos, para especificar a direção e distância do deslocamento.
div { posição : relativa ; superior : 20 px ; }
No código acima, o divelemento é deslocado para baixo a partir da posição padrão 20px(ou seja, de cima 20px).
3.2 valor absoluto da propriedade
absoluteIndica que o deslocamento é relativo ao elemento pai (geralmente o elemento pai), ou seja, o ponto base de posicionamento é o elemento pai.
Tem uma limitação importante: a base de posicionamento (geralmente o elemento pai) não pode ser o staticposicionamento; caso contrário, a base de posicionamento se tornará o elemento raiz de toda a página da web html. Além disso, absoluteo posicionamento deve corresponder top, bottom, left, rightutilizado com estas quatro propriedades.
/ * HTML代码如下 <div id = "pai"> <div id = "filho"> </ div> </ div> * / #father { positon : parente ; } #son { posição : absoluta ; superior : 20 px ; }
No código acima, o elemento pai está se relativeposicionando e o elemento filho está se absoluteposicionando; portanto, o ponto base de posicionamento do elemento filho é o elemento pai, que é deslocado para baixo em relação à parte superior do elemento pai 20px. Se o elemento pai estiver staticposicionado, o elemento filho no exemplo acima será deslocado para baixo na parte superior da página 20px.
Observe que o absoluteelemento posicionado será ignorado pelo "fluxo de página normal", ou seja, no "fluxo de página normal", o espaço ocupado pelo elemento é zero e os elementos circundantes não são afetados.
3.3 valor do atributo fixo
fixedIndica que o deslocamento é relativo à janela de visualização (janela de visualização, janela do navegador), ou seja, o ponto base de posicionamento é a janela do navegador. Isso faz com que a posição do elemento não seja alterada à medida que a página rola, como se estivesse fixada na página.
Se é com top, bottom, left, rightusar esses quatro atributos em conjunto, representa a posição inicial do elemento é calculado com base na janela, caso contrário, a posição padrão é a posição inicial do elemento.
div { posição : fixa ; topo : 0 ; }
No código acima, o divelemento está sempre na parte superior da janela de exibição e não muda à medida que a página rola.
Quatro, valor do atributo pegajoso
stickyCom os primeiros quatro valores não são o mesmo atributo, que irá gerar um efeito dinâmico, como relativee fixedcombinação: por algum tempo é relativeposicionado (ponto de auto-posicionamento, é a posição do defeito), quando o outro torna-se automática fixedde posicionamento (ponto de posicionamento é a janela de visualização).
Portanto, pode formar um efeito de "fixação dinâmica". Por exemplo, a barra de ferramentas de pesquisa de uma página da Web está inicialmente no local padrão ( relativeposicionamento) quando é carregada .
Quando a página rola para baixo, a barra de ferramentas se torna uma posição fixa, permanecendo sempre no início da página ( fixedposicionamento).
Quando a página voltar à sua posição original novamente, a barra de ferramentas retornará à posição padrão.
stickyA premissa é para ter efeito, deve ser usado com top, bottom, left, rightem conjunto, estes quatro atributos, não pode ser omitido, caso contrário, idêntica à relativeposição, não produz efeito "estabilização dinâmica". O motivo é que esses quatro atributos são usados para definir a "distância de deslocamento", que o navegador considera como stickyo limite efetivo.
Sua regra específica é que, quando a página rola e o elemento pai começa a deixar a janela de visualização (ou seja, parcialmente invisível), desde que stickya distância até o elemento atinja o limite efetivo, o relativeposicionamento muda automaticamente para o fixedposicionamento; quando o elemento pai sai completamente da janela de visualização (ou seja, completamente Invisível), o fixedposicionamento volta automaticamente ao relativeposicionamento.
Por favor, veja o código de exemplo abaixo. (Observe que todos os navegadores, exceto o IE, que foram eliminados, atualmente são suportados sticky. No entanto, o navegador Safari precisa ser prefixado com um navegador -webkit-.)
#toolbar { position : -webkit-sticky ; / * navegador safari * / position : sticky ; / * outros navegadores * / top : 20px ; }
No código acima, quando a página rola para baixo, #toolbaro elemento pai começa a sair da janela de visualização. Depois que #toolbara distância entre a parte superior da janela de visualização e o 20pxlimite for menor que (o limite), #toolbarele será automaticamente fixedposicionado para manter 20pxa distância da parte superior da janela de visualização .
A página continua a rolar para baixo, o elemento pai sai completamente da janela de exibição (ou seja, todo o elemento pai é completamente invisível) e #toolbarretorna ao relativeposicionamento.
Aplicação cinco, pegajosa
stickyO posicionamento pode obter alguns efeitos muito úteis. Além do efeito "fixação dinâmica" mencionado acima, aqui estão mais dois.
5.1 Efeito de empilhamento
Empilhamento significa que, quando a página rola, os elementos abaixo cobrem os elementos acima. A seguir, é apresentado um exemplo de pilha de figuras: A figura abaixo irá rolar com a página, cobrindo a figura acima (consulte a demonstração ).
O código HTML é apenas algumas fotos.
< div > < img src = "pic1.jpg" > </ div > < div > < img src = "pic2.jpg" > </ div > < div > < img src = "pic3.jpg" > </ div >
O código CSS é extremamente simples, contanto que duas linhas.
div { posição : pegajosa ; topo : 0 ; }
Seu princípio é que, quando a página rolar para baixo, cada figura se tornará um fixedposicionamento, resultando na próxima figura sobrepondo-se à figura anterior. Uma explicação detalhada pode ser encontrada aqui .
5.2 Bloqueio do cabeçalho da tabela
Ao rolar uma tabela grande, o cabeçalho da tabela é sempre fixo e também pode ser stickyimplementado (consulte a demonstração ).
O código CSS também é muito simples.
th { posição : pegajosa ; topo : 0 ; }
Deve-se notar que ele stickydeve ser definido no <th>elemento, não no elemento <thead>e <tr>, porque esses dois elementos não estão relativeposicionados, portanto não há stickyefeito. Uma explicação detalhada pode ser encontrada aqui .