Um elemento de bloco em HTML é um elemento que, por padrão, ocupa toda a largura de seu elemento pai. O elemento pai pode ser outro elemento de bloco ou uma janela do navegador. Você pode definir a largura e a altura de um elemento de bloco usando propriedades CSS. Posicionar elementos de bloco é o processo de posicioná-los dentro da janela do navegador e em relação a eles usando as propriedades CSS position , left , top , right e bottom . A propriedade position CSS foi projetada para definir um dos quatro tipos de posicionamento disponíveis: estático (padrão), absoluto, fixo e relativo. As propriedades CSS restantes, nomeadamente left , top , right e bottom , são usadas para definir distâncias relativas às bordas esquerda, superior, direita e inferior do elemento pai. Além disso, ao definir determinadas propriedades, os elementos do bloco podem se sobrepor, e esse recurso também pode ser usado em sites.
Posicionamento padrão (estático)
Se você não especificou uma posição para um elemento de bloco ou especificou static , o que é a mesma coisa, então os elementos de bloco serão organizados em ordem. Além disso, o próximo bloco (por exemplo: vermelho) está localizado em uma nova linha. Além disso, este posicionamento não é afetado pela definição das distâncias left , top , right e bottom .
Posicionamento absoluto (absoluto)
Com o posicionamento absoluto, a posição de um elemento é especificada em relação às bordas da janela do navegador usando distâncias especificadas pelas propriedades left , top , right e bottom . Se você especificar as distâncias esquerda e direita ao mesmo tempo, e elas entrarem em conflito entre si, será dada preferência a left , o mesmo vale para top e bottom , em que a distância top tem precedência. O posicionamento absoluto é frequentemente usado em conjunto com o posicionamento relativo para fins de design, quando é necessário colocar vários elementos uns em relação aos outros; também pode ser usado para criar menus suspensos, layout de site, etc.
Posicionamento fixo
O posicionamento fixo é diferente de outros tipos de posicionamento e não acompanha o conteúdo conforme você rola a página. Os elementos de bloco de posição fixa são ancorados usando as propriedades left , top , right e bottom nas bordas da janela do navegador. O posicionamento fixo é utilizado para criar interfaces de frames (a janela do navegador é dividida em várias áreas), um menu fixo, um rodapé fixo do site e blocos “permanentes” (lista de links, botões sociais, etc.).
Posicionamento relativo
O posicionamento relativo é especificado especificando as distâncias left , top , right e bottom em relação à sua posição atual.
No entanto, esta posição do bloco também pode ser criada usando a propriedade margin.
O posicionamento relativo não é divertido de usar sozinho; é usado principalmente em conjunto com o posicionamento absoluto.
Vamos considerar as opções:
Com o posicionamento CSS, você pode colocar um elemento exatamente onde deseja na página. Juntamente com os flutuadores (veja a Lição 13), o posicionamento oferece grandes oportunidades para criar designs precisos e sofisticados.
Nesta lição discutiremos o seguinte:
Princípios de posicionamento CSS
Vamos imaginar a janela do navegador como um sistema de coordenadas:
Os princípios do posicionamento CSS são que você pode posicionar a caixa em qualquer lugar do sistema de coordenadas.
Digamos que queremos posicionar o título. Ao usar o modelo de caixa (veja a Lição 9), o cabeçalho fica assim:
Se quisermos posicioná-lo 100px do topo do documento e 200px da esquerda, devemos inserir o seguinte código CSS:
H1 ( posição:absoluta; superior: 100px; esquerda: 200px; }
Aqui está o resultado:
Como você pode ver, Posicionamento CSS é uma técnica muito precisa na hora de posicionar elementos. É muito mais fácil do que usar tabelas, imagens transparentes ou algo parecido.
Posicionamento absoluto
Um elemento posicionado de forma absoluta não recebe espaço no documento. Isto significa que após o posicionamento não deixa nenhum espaço vazio para trás.
Para posicionar um elemento de forma absoluta, a propriedade position deve ter o valor absoluto. Você pode usar os valores esquerda, certo, principal E fundo para colocar a caixa.
Como exemplo de posicionamento absoluto, colocaremos 4 caixas nos cantos do documento:
#caixa1 ( posição:absoluta; superior: 50px; esquerda: 50px; ) #caixa2 ( posição:absoluta; superior: 50px; direita: 50px; ) #caixa3 ( posição:absoluta; inferior: 50px; direita: 50px; ) #caixa4 ( posição:absoluta; inferior: 50px; esquerda: 50px; )
Posicionamento relativo
Para posicionar um elemento relativamente, defina a propriedade position como relativo. A diferença entre o posicionamento absoluto relativo é como o posicionamento é calculado.
A posição do elemento que está sendo colocado em relação a calculado em relação à sua posição original no documento. Isso significa que você move o elemento para a direita, esquerda, para cima ou para baixo. Assim, o elemento ainda ocupa espaço no documento após o posicionamento.
Como exemplo de posicionamento relativo, vamos tentar colocar três imagens em relação à sua localização original na página. Observe que os desenhos deixaram espaços vazios em suas posições originais no documento após serem movidos.
Você ainda está confuso sobre como funciona o posicionamento absoluto em CSS e está perdendo elementos na tela? Vamos entender essa mágica.
Introdução ao Posicionamento
Quando você define position: absoluto , não é o elemento em si que vem à tona, mas seu contêiner pai, porque o posicionamento em CSS é relativo a ele. A dificuldade é que nem sempre este é o pai imediato do elemento.
Vejamos um código com quatro divs aninhados uns dentro dos outros, como uma boneca aninhada.
< body > < div class = "box-1" > < div class = "box-2" > < div class = "box-3" > < div class = "box-4" > < / div > < / div > < / div > < / div > < / body > |
As caixas box-1 , box-2 e box-3 são centralizadas para fins de beleza usando as propriedades margin: auto e flex CSS. O bloco box-4 permanece em sua posição padrão no fluxo de documentos.
corpo ( display: flex; ) .box-1, .box-2, .box-3 ( display: flex; margem: auto; )
corpo( exibição: flexível; Caixa-1, Caixa-2, Caixa-3 ( exibição: flexível; Margem: automática; |
Todos os 4 elementos têm posicionamento padrão. No momento o layout está assim:
.box-4 sem posicionamento Contra o que estamos nos posicionando?
Para se posicionar, um elemento deve saber duas coisas:
- qual pai se tornará o ponto de partida;
- a quantidade de deslocamento em relação ao ponto de referência (superior, inferior, direita ou esquerda).
Se você definir position: absoluto para box-4 , esse elemento sairá do fluxo normal do documento. Mas agora permanece em seu lugar, pois as coordenadas de deslocamento não são especificadas. Se a largura de um elemento não estiver definida em CSS, ela será igual à largura do seu conteúdo (mais preenchimento e borda).
.box-4 com posicionamento absoluto sem deslocamento Agora vamos adicionar as propriedades top: 0 e left: 0 . O elemento deve determinar qual contêiner pai se tornará o ponto de referência para essas coordenadas. O elemento mais próximo com uma posição não estática (geralmente posição: relativa) torna-se ele. box-4 começa a interrogar seus ancestrais um por um. Nem box-3, nem box-2, nem box-1 são adequados, pois possuem um posicionamento padrão em CSS (não definido).
Se um ancestral posicionado não for encontrado, o elemento será colocado em relação ao corpo do documento:
.box-4 com posicionamento absoluto. Elementos pais sem posicionamento Se você definir position: relativo ao elemento box-1, ele se tornará o ponto de referência:
.box-4 com posicionamento absoluto. .box-1 com posicionamento relativo Um elemento absolutamente posicionado é posicionado em relação ao seu ancestral posicionado mais próximo.
Depois que um ponto de referência for encontrado, tudo acima dele na árvore DOM deixa de ter importância.
Se você definir position: relativo também para box-2 , então box-4 será posicionado em relação a ele, porque esse ancestral está mais próximo.
.box-4 com posicionamento absoluto. .box-2 com posicionamento relativo Da mesma forma para o contêiner box-3:
Como você provavelmente já sabe, você pode fazer o layout de um site usando tabelas; nesse caso, a página é dividida em células. Você também pode usar blocos para essas finalidades quando a página de um site consiste em elementos individuais.
Provavelmente não me enganarei se disser que um problema sério para muitos webmasters novatos é a tarefa de colocar blocos em um determinado local de uma página web.
Uma das principais dificuldades no layout utilizando blocos é o posicionamento (alinhamento) desses mesmos blocos.
Um pouco sobre camadas
Acho que muitos de vocês já ouviram falar de algo como camada. E, via de regra, uma camada é entendida como um bloco especificado por uma tag
Não há camadas em HTML. É apenas uma metáfora. Quando falamos sobre camadas, elas se referem a um determinado contêiner (elemento) html que pode ser colocado em um determinado local de uma página web.
O segundo equívoco é que apenas o bloco especificado pela tag é classificado como camadas
), listas (
- ) e outros elementos.
E agora sobre Oh.
Conforme mencionado acima, você pode definir a localização de qualquer elemento HTML. Não há necessidade de usar sempre a tag para isso
. Além disso, o uso desta tag não obriga você a atribuir-lhe qualquer posição na página web.
O significado de usar um bloco especificado por uma tag
se resume à consolidação. Afinal, você pode colocar outros elementos dentro dele (parágrafos, imagens, etc.). Isso cria um grande bloco com conteúdo variado, que é muito mais fácil de posicionar em uma página web do que cada elemento separadamente.
Posicionamento de elementos.
Existem quatro tipos principais de posicionamento:
1. Estático
2. Absoluto
3. Corrigido
4. Relativo)
Estático
Usado como local padrão. Nesse caso, o navegador analisa o código HTML, divide-o em elementos e compõe uma página a partir deles. O resultado é uma sequência de vários elementos. Eles são exibidos na ordem em que são indicados no código HTML.
Aplicando parâmetros esquerda, superior, direita e inferior não leva a nenhum resultado.
O posicionamento estático deve ser lembrado quando o posicionamento relativo for usado.
Absoluto
Usando o posicionamento absoluto, as coordenadas do canto superior esquerdo do bloco são especificadas. Neste caso, as coordenadas são contadas em relação à localização do elemento pai. Se o elemento pai for uma janela do navegador, o bloco será alinhado em relação a ela. Se houver outro elemento dentro do qual o bloco está localizado, o alinhamento ocorre em relação a este elemento.
Fixo
Já pelo nome fica claro que neste caso o elemento é fixo. Ele está localizado em um local específico da página da web e não se move para lugar nenhum. Esse alinhamento é frequentemente usado para pop-ups, onde eles ficam centralizados e não se movem conforme você rola a página.
Relativo
Este tipo de posicionamento pode ser difícil. Seu nome não é totalmente adequado. Muitas pessoas confundem o posicionamento relativo e absoluto dos elementos. Pode parecer que o alinhamento é relativo ao elemento pai. E no caso de posicionamento absoluto - em relação à janela do navegador. Mas isso não é verdade.
É necessário entender que a localização do elemento neste caso ocorre em relação ao seu lugar na posição estática. Isto é o que foi mencionado acima.
Simplificando, você diz ao navegador para mover um elemento tantos pixels em relação ao local onde ele está localizado por padrão.
Há outro ponto difícil. O que acontece se o elemento pai tiver posicionamento relativo, mas o elemento aninhado tiver posicionamento absoluto? Neste caso, as coordenadas do elemento filho serão contadas em relação ao elemento pai, levando em consideração o seu deslocamento, se houver.
Resumir.
Então, há uma propriedade posição. Esta propriedade pode assumir 4 valores Estático, Absoluto, Fixo e Relativo. O padrão é Estático.
Ao especificar coordenadas para um elemento, você também deve informar ao navegador como ele deve calcular essas coordenadas. Precisamos dar a ele um ponto de partida.
Não se esqueça que se não houver propriedade posição as coordenadas não serão levadas em consideração, o bloco permanecerá no mesmo lugar, em sua posição estática.
Agora vamos ver como as coordenadas são definidas.
Para esses fins, são utilizados quatro tipos de propriedades:
1. Superior
sobraram 2
3. Certo
4. Parte inferior
Principal- um valor positivo (por exemplo, 20px) move o bloco 20 pixels para baixo. Um valor negativo (-20px) move o elemento 20 pixels para cima. Tudo isso acontece em relação ao canto superior esquerdo.
Esquerda- deslocar para a esquerda ou para a direita, dependendo do sinal. Em relação ao canto superior esquerdo.
Certo- deslocar para a direita e para a esquerda, dependendo do sinal. Em relação ao canto superior direito.
Fundo- mudar para cima ou para baixo, depende do sinal. Ocorre em relação ao canto inferior esquerdo.
Aqui está o código HTML:
E este é o CSS:
#1 {
posição:relativo;
topo: 100px;
esquerda:100px;
largura:500px;
altura:500px;
cor de fundo:#CCCCCC;
}
#11 {
cor de fundo:#003399;
posição:absoluta;
inferior: -30px;
direita: -50px;
largura:100px;
altura:100px;
}
#2 {
cor de fundo:#990066;
largura:200px;
altura:300px
}
Prática.
Enquanto escrevia, descobri sozinho.
Conforme mencionado acima, você pode definir a localização de qualquer elemento HTML. Não há necessidade de usar sempre a tag para isso
O significado de usar um bloco especificado por uma tag Existem quatro tipos principais de posicionamento: 1. Estático Usado como local padrão. Nesse caso, o navegador analisa o código HTML, divide-o em elementos e compõe uma página a partir deles. O resultado é uma sequência de vários elementos. Eles são exibidos na ordem em que são indicados no código HTML. Aplicando parâmetros esquerda, superior, direita e inferior não leva a nenhum resultado. O posicionamento estático deve ser lembrado quando o posicionamento relativo for usado. Usando o posicionamento absoluto, as coordenadas do canto superior esquerdo do bloco são especificadas. Neste caso, as coordenadas são contadas em relação à localização do elemento pai. Se o elemento pai for uma janela do navegador, o bloco será alinhado em relação a ela. Se houver outro elemento dentro do qual o bloco está localizado, o alinhamento ocorre em relação a este elemento. Já pelo nome fica claro que neste caso o elemento é fixo. Ele está localizado em um local específico da página da web e não se move para lugar nenhum. Esse alinhamento é frequentemente usado para pop-ups, onde eles ficam centralizados e não se movem conforme você rola a página. Este tipo de posicionamento pode ser difícil. Seu nome não é totalmente adequado. Muitas pessoas confundem o posicionamento relativo e absoluto dos elementos. Pode parecer que o alinhamento é relativo ao elemento pai. E no caso de posicionamento absoluto - em relação à janela do navegador. Mas isso não é verdade. É necessário entender que a localização do elemento neste caso ocorre em relação ao seu lugar na posição estática. Isto é o que foi mencionado acima. Simplificando, você diz ao navegador para mover um elemento tantos pixels em relação ao local onde ele está localizado por padrão. Há outro ponto difícil. O que acontece se o elemento pai tiver posicionamento relativo, mas o elemento aninhado tiver posicionamento absoluto? Neste caso, as coordenadas do elemento filho serão contadas em relação ao elemento pai, levando em consideração o seu deslocamento, se houver. Então, há uma propriedade posição. Esta propriedade pode assumir 4 valores Estático, Absoluto, Fixo e Relativo. O padrão é Estático. Ao especificar coordenadas para um elemento, você também deve informar ao navegador como ele deve calcular essas coordenadas. Precisamos dar a ele um ponto de partida. Não se esqueça que se não houver propriedade posição as coordenadas não serão levadas em consideração, o bloco permanecerá no mesmo lugar, em sua posição estática. Para esses fins, são utilizados quatro tipos de propriedades: 1. Superior Principal- um valor positivo (por exemplo, 20px) move o bloco 20 pixels para baixo. Um valor negativo (-20px) move o elemento 20 pixels para cima. Tudo isso acontece em relação ao canto superior esquerdo. Esquerda- deslocar para a esquerda ou para a direita, dependendo do sinal. Em relação ao canto superior esquerdo. Certo- deslocar para a direita e para a esquerda, dependendo do sinal. Em relação ao canto superior direito. Fundo- mudar para cima ou para baixo, depende do sinal. Ocorre em relação ao canto inferior esquerdo. Aqui está o código HTML: E este é o CSS: #1 { #11 { #2 { Prática. Enquanto escrevia, descobri sozinho.Posicionamento de elementos.
2. Absoluto
3. Corrigido
4. Relativo)Estático
Absoluto
Fixo
Relativo
Resumir.
Agora vamos ver como as coordenadas são definidas.
sobraram 2
3. Certo
4. Parte inferior
posição:relativo;
topo: 100px;
esquerda:100px;
largura:500px;
altura:500px;
cor de fundo:#CCCCCC;
}
cor de fundo:#003399;
posição:absoluta;
inferior: -30px;
direita: -50px;
largura:100px;
altura:100px;
}
cor de fundo:#990066;
largura:200px;
altura:300px
}