os elementos de la página @web se superponen incluso cuando se utilizan valores porcentuales en css
Tengo una página con una estructura como esta. Quiero dividir la página en 6 secciones, así que hice 6 @ externdiv 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>
el problema es que cuando intento acercarme a la página usandoCtrl++ infirefox ochrome el contenido de ladivas @s se superponen entre sí, incluso cuando estoy especificando todas las propiedades comotop,width,height,left en porcentajes. ahora porque los porcentajes son unidades relativas, esto no debería suceder.
#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%;
}
En alguna otra página donde estaba usando píxeles en lugar de porcentajes, el contenido no se superpuso al hacer zoom en la página, pero los píxeles son unidades absolutas. ¿Qué pasa?
Los píxeles son los puntos en la pantalla, así que cuando hago zoom, ¿los píxeles se hacen más grandes?