Ho il seguente codice HTML:
<body>
<h1>Something</h1>
<img id="myid" src="/images/images/bigimage.png"/>
<div id="container">
<div id="fast-back">
<p class="big-font">SOMETHING</p>
<p class="small-font">SOMEThiNG ELSE</p>
</div>
</div>
</body>
E il CCS per questo è:
html {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
background: url(images/body-background.png) top no-repeat;
min-height: 860px;
height: 860px;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
color: white;
visibility: hidden;
}
#container {
margin: 0 auto;
padding: 0;
position: relative;
min-width: 1336px;
height: 860px;
width: 1336px;
}
#myid{
position: absolute;
left: 50%;
right: 50%;
margin-left: -1280px;
margin-right: -1280px;
z-index: 1004;
}
#fast-back {
position: relative;
margin-left: 15%; /*it moves even using pixel*/
top: 272px;
z-index: 99999;
text-align: center;
width: 126px;
}
Tuttavia, quando ridimensiono la finestra del browser, il div "fast-back" si sposta a destra.
Come posso prevenire questo comportamento?
Grazie!
risposte:
0 per risposta № 1Guardando #fastback Regola CSS, stai utilizzando la percentuale anziché i pixel su margin-left. Modificalo in pixel come unità di misura.
Se stai usando la percentuale come unità di misura, il margine sinistro dell'elemento, nel tuo caso, si sposterà in relazione alla finestra.
E se si utilizzano i pixel, d'altra parte, il margine rimane nella stessa posizione, anche se il browser viene ridimensionato.
Aggiornare
La soluzione è rimuovere la larghezza di #container. Vedi il seguente link.
http://jsfiddle.net/jlratwil/LB8rf/1/
Il motivo per cui la prima soluzione non funziona perché la larghezza del contenitore è impostata su 1336 pixel e centrata allineata tramite margin: 0 auto. Se la larghezza della finestra del browser supera i 1336 pixel durante il ridimensionamento, il #fastback l'elemento si sposterà.