Ao desenvolver qualquer aplicativo, a posição dos componentes deve ser apropriada para um layout melhor. Por exemplo, a barra de navegação é definida principalmente na parte superior do aplicativo, e as informações laterais são definidas em qualquer lado do documento, principalmente na parte superior, esquerda ou lados direito. Mais especificamente, o CSS permite que você utilize o “posição”Propriedade com o valor“fixo”Para definir os ícones de navegação para permanecer na mesma posição no aplicativo na rolagem.

Este blog discutirá:

• O que é CSS “posição" Propriedade?
• Como criar um elemento de posição fixa usando CSS?

O que é a propriedade "posição" CSS?

O CSS “posição”A propriedade é utilizada para definir a posição do elemento no aplicativo. Os vários valores associados à propriedade de posição CSS são “estático","absoluto","relativo","fixo", e "pegajoso”.

Esses valores de propriedade podem ser definidos com as outras propriedades de deslocamento, como “principal","esquerda","fundo", e "certo”Em CM, PX e mais. Essas compensações ajustam a posição dos elementos na página.

Como criar um elemento de posição fixa usando CSS?

Em HTML, adicione o elemento div com a classe “principal”. Dentro do elemento div, coloque o elemento associado aos seguintes atributos:

• ““src”É usado para especificar o link da imagem.
• ““aula”Atributo Acesse a imagem em CSS ou JavaScript usando o nome especificado.
• ““alt”O atributo é usado para especificar um texto alternativo que será exibido se a imagem falhar ao carregar na página.

Então, um elemento div com o nome da classe “contente”É adicionado que detém o

e

Elementos para o cabeçalho e parágrafo, respectivamente:

O posicionamento fixo do CSS

Hello Linuxhint Team!

Vamos para a seção CSS para decorar os elementos HTML mencionados.

Elementos de estilo "todos"

*
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;

O asterisco “ * “O símbolo é utilizado para selecionar todos os elementos. Todos os elementos no HTML são aplicados com o “família de fontes”Propriedade com o valor definido como“Verdana, Genebra, Tahoma, sem serifa”. Esta lista de estilos é fornecida para garantir que, se o navegador não suportar o primeiro valor, outros serão aplicados.

Div "Home" de estilo

.lar
Posição: fixado;
topo: 35px;
Esquerda: 16px;

As propriedades aplicadas ao elemento div “lar”Estão descritos abaixo:

• ““posição”É especificado para especificar a posição do elemento. O valor que "fixo”Definirá a posição do elemento fixada no local específico.
• ““principal”É a propriedade para ajustar a posição do elemento do topo.
• ““esquerda”A propriedade é utilizada para ajustar a posição do elemento da esquerda.

Estilo “conteúdo” div

.contente
Background-Color: CadetBlue;
Largura: 300px;
Altura: 350px;
preenchimento-esquerda: 40px;
margem-esquerda: 80px;

As propriedades CSS aplicadas ao elemento div tendo o nome da classe “principal" mencionado abaixo:

• ““cor de fundo”É especificado para definir a cor de fundo do elemento.
• ““largura”Propriedade define a largura do elemento HTML.
• ““altura”Propriedade define a altura do elemento HTML.
• ““preenchimento-esquerda”A propriedade é utilizada para adicionar o espaço à esquerda do conteúdo do elemento HTML.
• ““margem-esquerda”Propriedade define espaço à esquerda do elemento div.

Saída

Ele pode observar no resultado previsto acima de que a posição da imagem é fixada na janela do navegador em "35px" da parte superior e "16px" da esquerda.

Conclusão

O CSS “posição”A propriedade está associada ao valor“fixo”Valor para definir a posição do elemento fixado em um ponto. Além disso, esta propriedade é ajustada com suas propriedades de deslocamento, como parte inferior, superior, direita e esquerda. Este blog demonstrou o método para fazer a posição fixa do elemento no CSS com um exemplo prático.