cefet_front_end

CSS parte 5

Posicionamento

Na última aula (1/3)

Tags semânticas:

O HTML5

propôs elementos idênticos às divs/spans, mas que possuem sentido para o navegador. Por exemplo:

<header></header>   <!-- em vez de <div id="header"></div> -->
<footer></footer>   <!-- em vez de <div id="footer"></div> -->
<article></article> <!-- em vez de <div id="article"></div> -->
<time></time>       <!-- em vez de <span id="time"></span> -->
<nav></nav>         <!-- em vez de <div id="navigation"></div> -->

E várias outras…

Na última aula (2/3)

Quando mais de uma regra CSS se aplica, uma delas prevalece
- O navegador calcula uma pontuação de especificidade (abc) do seletor de cada regra:
  - a: quantidade de ids no seletor
  - b: quantidade de classes, atributos e pseudo-classes no seletor
  - c: quantidade de pseudo-elementos no seletor
- Quanto maior esse número, maior a precedência da regra ser aplicada

Na última aula (3/3)

Pseudo-classes e Pseudo-elements:

Pseudo-class … permitem selecionar elementos em diferentes situações … Exemplos: :focus (contém o foco), :hover (mouse em cima)

Pseudo-element … permitem estilizar certas partes de elementos … Exemplos: ::selection (seleção de texto) ::first-letter (primeira letra)

Roteiro de hoje

Posicionamento estático
Posicionamento relativo
Posicionamento absoluto
Posicionamento fixo
Alterando a visibilidade

Posicionamento estático

Deixando o navegador definir o fluxo da página

Relembrando o fluxo padrão
A propriedade position
O valor static

Relembrando o fluxo padrão

Elementos block … Ocupam toda a largura disponível … Dispostos de cima para baixo … Quebram linha

Elementos inline … Ocupam o espaço necessário (não mais) … Dispostos da esquerda para direita

Alterando o fluxo com `float` e `clear`

Sem float

Com float

Flutuando o parágrafo à direita:

p#amazing {
  width: 200px;
  float: right;
}

Quem flutua é removido do fluxo
- i.e., não ocupa mais espaço
Elementos depois do flutuante:
- Os block: passam a ignorar o elemento flutuante
- Os inline: respeitam o flutuante

Limitações do fluxo padrão

Mesmo com float e clear não é possível fazer algumas coisas
- Por exemplo, como colocar um texto em cima de uma imagem?

A propriedade `position`

A propriedade position permite definirmos se o navegador vai dispor um elemento usando o fluxo padrão ou outro fluxo
Valores possíveis:
1. position: static (valor padrão, para o fluxo padrão)
2. position: relative
3. position: absolute
4. position: fixed
5. position: sticky

Posicionamento estático

O próprio navegador encontra as posições (x,y) dos elementos

É o valor padrão - usa o posicionamento do fluxo padrão

<div class="estatico">Conteúdo</div>

.estatico {
  position: static; /* este já é o valor padrão */
}

.estatico

Resultado

Conteúdo
- Definir um position: static não altera nada

Posicionamento relativo

Deslocando elementos

O valor relative
Deslocando um elemento com as propriedades:
1. top
2. right
3. bottom
4. left

Posicionamento relativo

O elemento é posicionado como se estivesse no fluxo padrão, mas pode ser deslocado com as propriedades top, right, bottom e left

<div class="relativo1">Comporta-se como static...</div>
<div class="relativo2">...Mas pode ter um deslocamento.</div>

.relativo1 { position: relative; }
.relativo2 { position: relative; left: 30px; top: -10px; }

.relativo2

Resultado:

Comporta-se como static...

...Mas pode ter um deslocamento.

Detalhes sobre `position: relative`

O elemento continua no fluxo normal, a menos que tenha suas propriedades top :arrow_up:, right :arrow_right:, bottom :arrow_down: e left :arrow_left: ajustadas.
A posição do elemento será ajustada com relação à sua posição original (caso ele fosse static)
Os elementos posteriores a um elemento com position: relative não são ajustados para ocupar eventuais “buracos” na página

Utilidade do `position: relative` (1/2)

É útil quando queremos que um elemento fique próximo de onde ele estaria, mas levemente deslocado
- Legal para “dar um charme” no layout

Utilidade do `position: relative` (2/2)

Podemos fazer um pequeno deslocamento dando a ideia de botão:

Click me!

img {
  position: relative;
}
img:active {
  left: -3px;
  top: -3px;
}

Também utilizamos position: relative para definir um “plano de referência” para os filhos que estiverem com position: absolute (veremos mais adiante)

Posicionamento absoluto

Definindo (x,y) dos elementos

O valor absolute
Posicionando com:
1. top :arrow_up:
2. right :arrow_right:
3. bottom :arrow_down:
4. left :arrow_left:
Casos comuns

Posicionamento absoluto

O elemento é colocado nas posições especificadas pelas propriedades top :arrow_up:, right :arrow_right:, bottom :arrow_down: e left :arrow_left:, considerando como referência o ancestral mais próximo que esteja posicionado não estaticamente (relative, absolute ou fixed)
- Se não houver um ancestral, posiciona de acordo com elemento <html>
Não ocupa espaço, já que o elemento é removido do fluxo

Exemplo de posição absoluta

<div class="de-fora">Este é um recipiente relativo.
  <div class="de-dentro">Este é absoluto.</div>
</div>

.de-fora {
  position: relative;
}
.de-dentro {
  position: absolute;
  width: 50%;
  right: 30px;
  bottom: 10px;
}

.de-dentro

Resultado:

Este é um recipiente relativo.

Este é absoluto.

Utilidades do `position: absolute`

Criar “drop-downs” de opções que não “empurram” a página pra baixo (porque não ocupam espaço)
Colocar elementos “um em cima do outro”
Posicionar elementos em qualquer lugar - um (x,y) - na página

Detalhes do `position: absolute`

O elemento não tem espaço reservado para ele. Em vez disso, ele fica exatamente na posição especificada por top, right, bottom, left relativo ao seu mais próximo antecessor-posicionado (não static)

Posicionamento fixo

Definindo (x,y) dos elementos na janela

O valor fixed
Posicionando com:
1. top :arrow_up:
2. right :arrow_right:
3. bottom :arrow_down:
4. left :arrow_left:
Casos comuns
z-index

Posicionamento fixo

O elemento é posicionado de acordo com os valores das propriedades top, right, bottom e left, assim como absolute, porém seu ponto de partida é o canto superior esquerdo da janela
Não acompanha a rolagem da página
Não ocupa espaço, já que o elemento é removido do fluxo

Posição fixa (cont.)

<div class="bilhete">
  Este é um elemento fixo.
</div>

.bilhete {
  position: fixed;
  right: 0;
  bottom: 10px;
}

Resultado:

Utilidade do `position: fixed`

Manter elementos sempre na mesma posição, independente da barra de rolagem

Criar caixas de diálogo modais (que o usuário precisa interagir ou fechar)

position – Exemplo com todos

Considere que:
- O div representado pelo quadrado pontilhado está como position:relative
- O div 2 possui as propriedades: top:-20px e left: 30px

`position`	Descrição	Exemplos de uso	`top`, `right`, `bottom`, `left`	`z-index`
`static`	Fluxo normal	Elementos que não requerem posicionamento especial	ignorados	ignorado
`relative`	Fluxo normal, deslocado	Elementos que podem se deslocar um pouco; elementos contextos para outros absolutamente posicionados	deslocamentos nas 4 direções	determina ordem
`absolute`	Removido do fluxo, posicionado em um (x,y) relativo a um contexto	Elementos que queremos determinar os valores (x,y) para posicioná-los exatamente em algum lugar	posições referentes às 4 direções	determina ordem
`fixed`	Removido do fluxo, posicionado em um (x,y) relativo à janela	Idem ao `absolute`, mas a posição é fixa na janela (e não na página)	posições referentes às 4 direções	determina ordem

z-index

Define a ordem “no eixo Z” com a qual elementos que se tocam deve ser exibida

z-index=1

z-index=2

z-index=3
Útil apenas para elementos position: absolute ou position: fixed

Alterando a visibilidade

Fazendo elementos aparecerem ou sumirem

Com display: none
Com visibility: hidden
Com opacity: 0

Visibilidade usando display

É possível tornar um elemento invisível usando display: none;
O elemento é removido do fluxo, ou seja, o espaço onde ele seria posicionado é liberado
```
img#logotipo {
  display: none;
}
```

A propriedade visibility (na MDN)

Usada para alterar a visibilidade de elementos

img#logotipo {
  visibility: hidden; /* visible */
}

Os elementos invisíveis (hidden) continuam ocupando espaço
Descendentes de elementos invisíveis herdam o valor hidden, mas podem tornar-se visíveis usando visibility: visible;

A propriedade opacity (na MDN)

Usada para definir a opacidade (transparência) de elementos

video {
  opacity: 0.5; /* 0.0 (transparente) a 1.0 (opaco) */
}

Os elementos transparentes continuam ocupando espaço, mas deixam transparecer quem está “atrás” deles

↑ Comparação entre display, visibility e opacity

A propriedade overflow (na MDN)

Controla se conteúdo que extrapola o elemento deve ser cortado, se deve ser mostrado ou se deve ser criada uma barra de rolagem
```
div {
  overflow: scroll; /* visible, hidden, scroll, auto */
}
```
Exemplo:
- ```
div {
  max-height: 175px;
  overflow: auto;

  /* para visualizar a div */        
  border: 1px dashed gray;
}
```
  Cultuadas ao longo da história por diversas civilizações como símbolo de riqueza, trabalho ou de perseverança, pela forma como defendem seu território, as abelhas surgiram muito antes do homem, há mais de 100 milhões de anos.
  
  Pertencentes à ordem Hymenoptera e à superfamília dos Apoidea (grupo Apiformes), as abelhas se dividem em cerca de 20 mil espécies e a mais conhecida é a Apis mellifera.

cefet_front_end

CSS parte 5

Posicionamento

Na última aula (1/3)

Na última aula (2/3)

Na última aula (3/3)

Roteiro de hoje

Posicionamento estático

Deixando o navegador definir o fluxo da página

Relembrando o fluxo padrão

Alterando o fluxo com float e clear

Limitações do fluxo padrão

A propriedade position

Posicionamento estático

Posicionamento relativo

Deslocando elementos

Posicionamento relativo

Detalhes sobre position: relative

Utilidade do position: relative (1/2)

Utilidade do position: relative (2/2)

Posicionamento absoluto

Definindo (x,y) dos elementos

Posicionamento absoluto

Exemplo de posição absoluta

Utilidades do position: absolute

Detalhes do position: absolute

Posicionamento fixo

Definindo (x,y) dos elementos na janela

Posicionamento fixo

Posição fixa (cont.)

Utilidade do position: fixed

position – Exemplo com todos

z-index

Alterando a visibilidade

Fazendo elementos aparecerem ou sumirem

Visibilidade usando display

A propriedade visibility (na MDN)

A propriedade opacity (na MDN)

A propriedade overflow (na MDN)

Alterando o fluxo com `float` e `clear`

A propriedade `position`

Detalhes sobre `position: relative`

Utilidade do `position: relative` (1/2)

Utilidade do `position: relative` (2/2)

Utilidades do `position: absolute`

Detalhes do `position: absolute`

Utilidade do `position: fixed`