Dúvida com o posicionamento do 3D

Oi, Eric, tudo bem?

Pra te ajudar melhor, seria legal compartilhar o trecho do código css onde isso acontece.

O que o position: absolute faz é se deslocar a partir do browser assim como respeitando o seu pai, mas depende de algumas coisas... O position padrão dos elementos é o static. Vê esse mini exemplo:

 <div class="quadrado quadrado-first">
    Quadrado
  </div>

.quadrado {
  width: 150px;
  height: 150px;
  line-height: 200px;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
}

.quadrado-first {
  background-color: red;

Eu desejo mover essa div que está do meu lado esquerdo do navegador usando por padrão a propriedade static, ou seja, se eu usar o right: 0; teoricamente o meu quadradro deveria para o lado direto, certo? Mas ele não vai porque o position static impede. O position absolute pode nos ajudar nisso.

.quadrado-first {
  position: absolute;
  right: 0;
  background-color: red;

Pronto! Agora, ele irá para o lado direito do navegador como eu desejo. Mas como funciona? Quando usamos o absolute é criado um novo contexto para o elemento em questão, a div, ocupando um espaço no navegador que indicamos. Esse exemplo é forma que o absolute respeita o navegador.

Mas se criarmos uma nova div menor, dentro da que já definimos, ficando o filho dentro do pai e o meu objetivo é deixar o quadro menor no centro do quadrado maior:

 <div class="quadrado quadrado-first">
    <div class= "quadrado-menor"> Menor</div>
  </div>

.quadrado-menor{
  position: absolute;
  width: 75px;
  height: 75px;
  line-height: 100px;
  background-color: blue;
  left: 50%;
  top: 50%;
  transform: translate (-50%,  -50%);
}

Aqui, o quadrado-menor usando o position absolute respeita o seu pai, quadrado-first (ambos estão usando position: absolute) que está com um position diferente de *static . Se usar o position relative na div pai, a div filho também irá respeitar.

Então, se você quiser que um elemento filho respeite o seu pai, o pai precisa, necessariamente, ser diferente de position: static. O position absolute tanto se move de acordo com o pai, tanto com o navegador = ]

Laís, sua explicação me esclareceu bastante. Logo pensei que meu header estava em position static. Falta de sorte ou não, ele já tinha uma instrução de position relative.

O código do html e css em questão são dá página index:

https://github.com/thommps/Alura-3D/raw/master/alura.zip

Ainda não sei o que está causando o problemas das palavras saírem da tela.

Que bom, Eric.

Abri o seu index aqui e as palvras do header estão dentro e não fora da tela. As palavras que você fala são: css, eficiencia, boas-praticas, html5...?

Olá , tudo bem? Eu baixei o seu zip e olhei seu código. Notei que em alguns momentos você usa seletores com a própria TAG e mesmo quando o elemento possui uma CLASSE, tome cuidado pois, isso pode te atrapalhar, sem querer você pode atribuir regras diferentes para o mesmo elemento.

Outra coisa, você adicionou position:relative em cada palavra do header , porém, cada palavra possui a classe palavra-home que já possui a regra position: relative.

Eric Ferreira, eu comecei a corrigir o seu código, porém, tinha muita coisa faltando ou configurada diferente, praticamente eu teria que reescrever o todo o seu CSS da página index.css, além de ter regras CSS do arquivo site.css dentro do index.css.

SUGESTÃO: A plataforma da ALURA disponibiliza ao fim e as vezes ao início de cada capitulo os arquivos do projeto atual, baixe-os e compare, veja as modificações implementadas pelo instrutor, veja onde você errou, onde você esqueceu de declarar algo.

Link para arquivos do projeto Palavras 3D

OBS.: Revise tudo, se for necessário, reescreva tudo, isso o ajudará a aprender a encontrar BUGS, erros. Não tenha medo de reescrever o que está errado. Se o elemento possui uma classe, declare regras para esse elemento o selecionando através da classe e não da TAG.

Desculpem a demora para responder.

Douglas, obrigado pela dica da TAG e da classe e, quanto ao position: absolute, esse foi um dos problemas que relatei: se retiro a instrução de cada palavra e deixo só o da classe palavras-home as palavras somem.

Quanto a diferença entre o meu código e o fornecido no final das lições, isso é resultado deste ser o mesmo projeto desde o curso I de CSS. A medida que fui fazendo o curso, reparei que quando disponibilizavam os arquivos atualizados do projeto, muitas vezes eles não refletiam o que realmente foi pedido nas lições e algumas vezes continham novas instruções que não foram pedidas anteriormente. Então, para manter uma consistência no projeto total eu sempre mantive o mesmo arquivo e ia adaptando com o andar da carruagem.

Parece que dessa vez vou ter que pegar o atualizado mesmo. Nem que seja para essa sessão única do 3D. Se eu conseguir fazer funcionar neste, vou comparar com o meu original e tentar descobrir o que está rolando.

Lais, obrigado pela consideração também. Como havia dito, as palavras ficam OK com uma perspectiva de 20px. Contudo, se coloco a perspectiva de 6px pedida no exercício elas somem.

Descobri o que estava dando errado. Peguei o arquivo de projeto fornecido mais à frente no final da lição e reparei que todas as palavras no header estavam posicionadas com instrução de top e left enquanto algumas palavras minhas estavam posicionadas usando top e right. Foi trocar isso e deu certo. Engraçado que segui o modelo sugerido na lição anterior, na qual eles posicionaram a primeira palavra de exemplo com top e right. Contudo, nos arquivos finais essa mesma palavra está posicionada com top e left. É por conta dessas mudanças que não são explicadas e apenas aparecem, que eu sempre mantive o meu arquivo ao invés de baixar os atualizados.

Descobri também o motivo que as palavras sumiam quando eu tirava a instrução position absolute de cada palavra e elas sumiam: eu acreditava que tinha colocado a instrução position absolute na classe do li, o que me permitiria retirar a instrução de cada palavra, mas reparei que coloquei na classe do ul devido ao nome semelhante das classes de ambos (palavra-home e palavras-home).

De qualquer forma, obrigado a todos pela presteza.