[SOLUCIONADO] botón se desplaza sobre capa

[xtuu]

Buenas compis, tengo una duda que no consigo resolver...
La cosa es que tengo una capa en la cual hay botones, al aumentar la ventana (ctrl +) digamos que el botón se desplaza...
Pensaba que con (position: fixed;) se solucionaría pero no , y he probado ya varias formas y no tengo ni idea... A ver si vosotros podéis saber el porqué los botones se desplazan...
Gracias de antemano

Codigo de la capa

contenido{
margin-top:0%;
margin-bottom:0%;
margin-left:0%;
margin-right:0%;
width: 100%;
height: 500px;
background:#E96500;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
position:relative;
}

Código del botón

.boton{
background-color: #2dc234;
background-image: -webkit-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: -moz-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: -o-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
-ms-border-radius:8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
color: #FFFFFF;
font-family: 'Pacifico', Arial, sans-serif;
font-size: 20px;
line-height: 1;
padding: 15px 25px;
margin-left:20%;
margin-bottom:0px;
margin-top:5%;
margin-right:0px;
width:10%;
height:5%;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(25, 123, 29, .7);
position:fixed;
}

[fede5426]

Es probable que el motivo sea tener los margenes en porcentajes.. al aumentar el zoom es como si achicaras la ventana, el 20% y el 5% dejan de ser el mismo numero de pixeles que cuando no tenia zoom.

[xtuu]

Iniciado por fede5426

Es probable que el motivo sea tener los margenes en porcentajes.. al aumentar el zoom es como si achicaras la ventana, el 20% y el 5% dejan de ser el mismo numero de pixeles que cuando no tenia zoom.

Pues ese era el fallo, tenía entendido que era mejor hacer las páginas con "%" en vez de "px", o tal vez es que se necesita mas conocimiento sobre los posicionamientos...
Gracias por contestar!

[fede5426]

De nada

Es mejor usar porcentajes para definir el tamaño de determinados elementos, siempre y cuando necesites hacer responsive design.

Para explicarlo de manera fácil, haces que tus elementos sean "elásticos" y se ajusten al tamaño de la ventana.

Usarlo en los margenes no es una buena idea, en absolutamente TODAS las pantallas se va a ver diferente.

Marca el tema como solucionado si ya se arregló.

Saludos

[xtuu]

Iniciado por fede5426

De nada

Es mejor usar porcentajes para definir el tamaño de determinados elementos, siempre y cuando necesites hacer responsive design.

Para explicarlo de manera fácil, haces que tus elementos sean "elásticos" y se ajusten al tamaño de la ventana.

Usarlo en los margenes no es una buena idea, en absolutamente TODAS las pantallas se va a ver diferente.

Marca el tema como solucionado si ya se arregló.

Saludos

Gracias por la explicación.