0

Queria saber como calcular porcentagem na propriedade top. Busquei no google, mas não achei à minha duvida.

3
  • Simples... - top:10%;
    – Chun
    6/12/2015 às 21:22
  • Queria saber como calcular se é igual as propriedades margin ? 6/12/2015 às 21:25
  • 2
    Se fizer perguntas amplas, respostas amplas irão aparecer. Edite a sua pergunta e adicione mais informações e explique detalhadamente qual é o seu objetivo ou problema.
    – Chun
    6/12/2015 às 21:28

1 Resposta 1

1

Primeiramente, um esclarecimento, imagino que já deva saber, mas ressaltando, a propriedade top só irar funcionar com o esclarecimento da propriedade position, e essa escolha deve ser bem feita, como poderá ver.

A porcentagem realmente irá fazer um cálculo de porcentagem de acordo com o tamanho do "elemento pai", contudo, irá vai variar de acordo com alguns fatores, como:

A hierarquização dos elementos

A propriedade position: relative

Caso queria usar a porcentagem em um elemento solto página, que não é um "filho" de nenhum outro elemento, a porcentagem vai se referir ao "pai de todos", o body, em outra palavras, o tamanho da própria janela.

Mas, se este pertencer a um outro elemento, seguirá a mesma lógica, irá se relacionar ao tamanho deste pai. Exemplo:

#filho{
  width: 50px;
  height: 50px;
  background: #333333;
  position: relative;
  top: 50%;
}
#pai{
  width: 300px;
  height: 300px;
  background: #f09
  }
<div id="pai">
  <div id="filho"></div>
</div>
Como se pode perceber ele allinhou 50% em relação a borda superior do elemento filho.

Entretanto, há uma certa maleabilidade quando usamos o position: relative, pois a posição será relativa :) à existência de demais elementos. Exemplo:

#filho1{
  width: 50px;
  height: 50px;
  background: #333333;
  position: relative;
  top: 50%;
}
#filho2{
  width: 50px;
  height: 50px;
  background: #cccccc;
  position: relative;
  top: 50%;
}
#pai{
  width: 300px;
  height: 300px;
  background: #f09;
  position: absolute;
  }
<div id="pai">
  <div id="filho1"></div>
  <div id="filho2"></div>
</div>

Como pode-se perceber a um encadeiamento. No exemplo, o filho1 "afastou" o filho2. O que não contecerá no position: absolute.

O position: absolute

O encadeiamento não irá acontecer nesse caso os filhos se sobreposicionarão, eles não levam em consideração a existência um do outro:

#filho1{
  width: 50px;
  height: 50px;
  background: #333333;
  opacity: 0.5;
  position: absolute;
  top: 50%;
}
#filho2{
  width: 50px;
  height: 50px;
  background: #cccccc;
  opacity: 0.5;
  position: absolute;
  top: 50%;
}
#pai{
  width: 300px;
  height: 300px;
  background: #f09;
  position: absolute;
  }
<div id="pai">
  <div id="filho1"></div>
  <div id="filho2"></div>
</div>

Era isso que desejava saber? Se sim, espero que tenha entendido, e qualquer dúvida...

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .