Olá,
Até este ponto do curso, a propriedade overflow 1-) teve seu uso sugerido para garantir o funcionamento do efeito parallax nas palavras do cabeçalho da página index.html e 2-) foi usada para garantir que o menu <ul>, também da página index, não perdesse sua altura quando, em seus elementos <li>, fosse implementada a propriedade float (código abaixo).
/*uso da propriedade overflow com valor hidden para evitar a perda da altura de um elemento quando seus filhos flutuam*/
.trabalhos ul {
overflow: hidden;
border: 0.3em solid black;
}
.trabalhos li {
float: left;
width: 33.33333%;
}Assim sendo, tentei utilizar esta propriedade (overflow), com o valor hidden, para garantir que o elemento body, da página bio.html, não perdesse sua altura quando seu elemento definido pelas tags <main> e </main> flutuasse.
Não obtive, contudo, o resultado esperado: ao inspecionar o elemento <body>, percebi que sua altura continuava calculada como "0" e, além disso, a barra de rolagem da página havia sumido (como se eu tivesse implementado a propriedade overflow: hidden em um elemento com altura definida).
Para consertar problema, tive de adicionar overflow-x: hidden ao seletor html.
Com isso, tudo funcionou perfeitamente. E eu pude, inclusive, usar a altura de <body> para definir a altura de um elemento filho (o menu de navegação):
/*código funcionando corretamente com o uso da propridade overflow-x com valor hidden*/
html {
font-size: 120%;
overflow-x: hidden;
}
body {
font-family: "Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
line-height: 1.5;
overflow: hidden;
position: relative;
}
main {
width: 80%;
float:left;
padding-bottom: 80px;
}
.navegacao-site {
text-align: center;
background-color: #3C1D3D;
color: #F2FFFC;
padding: 1em;
width: 20%;
height: 100%;
position: absolute;
top: 300px;
right: 0;
}Minha primeira dúvida é: por que é necessário usar esse overflow-x: hidden no seletor html? Se o seletor body não tem altura definida, a propridade overflow com o valor hidden não deveria funcionar para que este elemento não perdesse sua altura quando seus filhos flutuassem?
A segunda dúvida, que está relacionada à primeira, diz respeito ao uso desta propridade para garantir o funcionamento do efeito parallax nas palavras da página index.
Percebi que o efeito só funciona se a propridade overflow-x: hidden estiver aplicada ao seletor body E ao seletor html. Por quê?
/*código funcionando corretamente para o efeito parallax das palavras de index.html*/
html {
font-size: 120%;
overflow-x: hidden;
}
body {
perspective: 6px;
perspective-origin: 50% 160px;
height: 100vh;
overflow-x: hidden;
}Desde já, agradeço! :)
