lementos da página @web se sobrepõem, mesmo quando usam valores de porcentagem em css

Question

Jul 12, 2011, 05:31 PM

lementos da página @web se sobrepõem, mesmo quando usam valores de porcentagem em css

Eu tenho uma página com estrutura como esta. Quero dividir a página em 6 seções, então criei 6 @ externadiv s.

<body>
<div id="header">
  <img />
</div>
<div id="pageTitle">
title of page
</div>
<div id="section1" class="section">
  <div class="section-title">
  section 1
  </div>
  <form>
  <input />
  </form>
</div>
<div id="section2" class="section">
  <div class="section-title">
  section 2
  </div>
  <form>
  <input />
  </form>
</div>
<div id="section3" class="section">
  <div class="section-title">
  section 3
  </div>
  <form>
  <input />
  </form>
</div>
<div id="nav">
<a href="url" />
</div>
</body>

O problema é que, quando tento ampliar a página usandoCtrl++ emfirefox ouchrome o conteúdo dodiv se sobrepõem, mesmo quando estou especificando todas as propriedades comotop,width,height,left em porcentagens. agora, porque as porcentagens são unidades relativas, isso não deve acontece

#header {
position:absolute;
top:2%;
width:90%;
height:50%;
}

#pageTitle {
position:absolute;
top:30%;
left:20em;
}

.section {
margin:20px;
border:10px;
width:60%;
height:33%;
}

.section-title {
position:absolute;
font-size:1.4em;
left:70%;
margin:10px;
top:10%;
width:60%;
height:15%
}

#section1 {
position:absolute;
top:40%;
}

#section2 {
position:absolute;
top:70%;
}

#section3 {
position:absolute;
top:100%;
}

form {
position:absolute;
top:30%;
height:70%;
}

label {
display:block;
width:75%;
font-size:1em;
}

#nav {
position:absolute;
top:140%;
}

Em outra página em que eu estava usando pixels, em vez de porcentagens, o conteúdo não se sobrepunha ao ampliar a página, mas os pixels são unidades absolutas. O que há de errado

Pixels são os pontos na tela; portanto, quando eu aumento o zoom, os pixels ficam maiore