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;
}