Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Duvida sobre a "caixa" - curso html e css parte 2

Em dado momento da aula é feita a seguyinte explicação com uso de metáforas: "[03:44] Toda a vez que a gente mexe em posicionamento e a gente está usando posicionamento absoluto, ele fica absoluto em relação a página, ou seja, o novo ponto inicial dele é qualquer ponto que a gente selecionou no navegador.

[03:59] Quando eu quero que ele tenha um ponto absoluto, mas de dentro de alguma caixa, eu preciso que essa caixa levante, eu preciso que essa caixa também tenha um posicionamento, só que agora um posicionamento relativo, eu quero só que ela levante, position relative."

No entanto, se o posicionamento absoluto do item é em relação a tela do navegador, por que ao criar uma classe qualquer (que engloba tal ítem e essa classe ter uma posição relativa) faz com que o ítem se ajuste ao espaço dessa classe criada? a tal caixa.

Vi aqui no fórum uma boia explicação com imagens e pelo que pude perceber o posicionamento absoluto é em relação ao grupo anterior. Ou seja, se eu tivesse no body da página duas div, e depois da segunda div qualquer coisa que precisasse de uma position absolute, então esse posicionamento absoluto seria em relação e teria uma limitação no espaçi da segunda div? essa segunda div precisa ter uma position relative? Ou então o posicionamento absoluto seria em relação aos limites da tela do navegador? (Se sim, volto na primeira pergunta)

Estou um pouco confuso em relação a utilidade/aplicabilidade prática do cotidiano, ou seja, é uma ferramenta a qual ainda não sei bem como ela funciona e em quais casos.

Obrigado.

Assim está emu código css se alguém quiser saber

header{
    background: #bbbbbb;
    padding: 20px 0 20px 0;
}

.caixa{
    position:  relative;
    width: 940px;
    max-width: 100%;
    margin: 0 auto;
}

nav{
    position:  absolute;
    top: 110px;
    right: 0;
}

/* nav li significa todos os itens da lista dentro de nav*/
nav li{
    display: inline;
/*Para dar um espaçamento eu faço isso no item porque o outro 
tag dali de baixo tem relação com o link e não com o item da lista em si.
a margem é primeiro topo, depois direita, baixo e esquerda*/
    margin: 0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size:  22px;
/*Para tirar o sublinhado das palavras que foram gerados pela ancoragem, 
então eu tiro toda decoração do texto*/     
    text-decoration: none;
}
2 respostas
solução!

Olá Ricardo, tudo bem?

Temos que entender isso como uma sequência de passos.

A regra é que quando o elemento filho está com umposition: absolute e o pai não tem position: relative declarado, por padrão, esse elemento irá adaptar o seu posicionamento em relação a tela do navegador.

Dessa forma, quando acrescentamos o position: absolute no elemento nav, ele passa a se posicionar conforme o browser, por que esse é o primeiro padrão, visto que não fizemos nada com o elemento pai.

Após esse passo, a partir do momento em que acrescentamos o position: relative no elemento pai que é representado pela class .caixa, estamos informando ao navegador que o posicionamento daquele elemento filho agora será relativo ao seu pai.

Vamos ao exemplo prático de utilização!


  • Quando queremos que o elemento se posicione em relação a página:

Site do linkedin com uma caixa posicionada no topo e direita. Essa caixa está sinalizada como o elemento que está posicionado em relação a página

No site do linkedin, o elemento sinalizado em vermelho está se posicionando em relação ao topo da página do navegador, para ter esse efeito, esse elemento estará com position: absolute e caso tenha um elemento pai, esse elemento não terá position relative declarado. Dessa forma, quando mexermos nas propriedades top e right por exemplo, a referência será a página.

  • Quando queremos que o elemento se posicione em relação ao pai:

Site do instagram com o menu, nesse menu há um ícone de mensagens e superiormente e a direita a esse ícone temos um círculo vermelho que representam as notificações. O ícone seria o elemento pai e as notificações o elemento filho

Supondo que a notificação sinalizada em vermelho seja o elemento filho e o ícone de mensagens seja o elemento pai, para que esse elemento filho se posicione em relação ao pai ele deverá ter position: absolute e o elemento pai deverá ter position: relative.

Espero ter ajudado, qualquer dúvida fique a vontade para perguntar!

Sensacional a explicação!

Obrigado!