Este blog discutirá a propriedade de posição CSS e o método para criar um elemento fixo em HTML.
O que é propriedade de posição CSS?
A propriedade CSS position especifica o método de posicionamento dos elementos HTML, que pode ser absoluto, fixo, estatístico, fixo, herdado, relativo ou inicial.
Sintaxe
posição : pegajoso | absoluto | estático | fixo | relativo | você herda | inicial
A sintaxe fornecida acima mostra que a propriedade position tem valores diferentes. Eles podem ser atribuídos de acordo.
Agora, vamos verificar o procedimento para criar elementos fixos em HTML.
O que é CSS position: sticky?
O elemento HTML com um “ pegajoso ” position tem uma posição relativa até atingir um ponto e então agir como um elemento aderente.
Vamos ver o exemplo simples para entender o conceito de posição fixa do CSS.
Exemplo: Como criar um elemento fixo em HTML?
No arquivo HTML, adicione
para o cabeçalho,
para o parágrafo e
com uma lista ordenada aninhada
- com uma lista
- .
Observação : Fizemos uma longa lista para que, ao rolar nossa página, você possa observar o comportamento do elemento fixo.
HTML
< h2 > Sticky Notes: Veja o efeito do elemento Sticky < / h2 >
< p > posição: pegajoso < / p >
< div classe = 'pegajoso' > Esta é a minha lista de tarefas! < / div >
< p >
< olá >
< este > Gerenciador de chamada < / este >
< este > Reunião com Funcionários < / este >
< este > Enviar relatório < / este >
< este > Vá ao médico < / este >
< este > Agendar um voo < / este >
< este > Dar uma volta. < / este >
< este > Vá para o supermercado. < / este >
< este > Assistir TV < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< este > Algum texto. < / este >
< / olá >
< / p >Em seguida, forneceremos estilo ao div chamado sticky:
- Aqui, ' .pegajoso ” representa a classe na qual as propriedades de estilo precisam ser aplicadas.
- Dentro das chaves, vamos atribuir o “ posição ” valor da propriedade como “ pegajoso ”.
- O ' topo ” é definido como “ 0 ”.
- O ' cor de fundo ' é ' #00154f ”.
- Dê alguns “ preenchimento ” para o div definindo seu valor como “ 40px ”.
- “ tamanho da fonte ' Como ' 30px ”.
- “ cor ” de fontes é definido como “ branco ”.
CSS
.pegajoso {
posição : pegajoso ;
topo : 0 ;
cor de fundo : #00154f ;
preenchimento : 40px ;
tamanho da fonte : 30px ;
cor : branco ;
}Salve o arquivo HTML e abra-o no navegador para ver o resultado:
Dica bônus
Ao utilizar o “ hsla() ” método, você pode definir um plano de fundo transparente para o elemento fixo adicionado da seguinte maneira:
fundo - cor : hsla ( 0 , 100 %, 90 %, 0,8 ) ;Resultado
É assim que o elemento adere à posição específica definindo o CSS “ posição ” valor da propriedade como “ pegajoso ”.
Conclusão
O ' pegajoso ” em CSS, faz com que a posição do elemento alterne entre relativa e fixa. Como resultado, o elemento sticky adicionado é posicionado em relação à rolagem até atingir um certo ponto em que se comporta como um sticky. Você também pode ajustar o nível de transparência do elemento fixo adicionado utilizando o método hsla(). Este blog orientou você sobre como criar elementos transparentes simples e aderentes.