Eu tenho o seguinte 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 o CCS para isso é:
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;
}
No entanto, quando eu redimensiono a janela do navegador, o div "fast-back" se move para a direita.
Como posso evitar esse comportamento?
Obrigado!
Respostas:
0 para resposta № 1Olhando para #fastback Regra CSS, você está usando porcentagem em vez de pixels em margin-left. Altere para pixels como unidade de medida.
Se você estiver usando porcentagem como unidade de medida, a margem esquerda do elemento, no seu caso, se moverá em relação à janela de visualização.
E se você estiver usando pixels, por outro lado, a margem fica no mesmo local, mesmo que o navegador seja redimensionado.
Atualizar
A solução é remover a largura do #container. Veja o seguinte link.
http://jsfiddle.net/jlratwil/LB8rf/1/
A razão pela qual a primeira solução não funciona porque a largura do contêiner é definida para 1336 pixels e centralizado alinhado via margin: 0 auto. Se a largura da janela de visualização do navegador ultrapassar 1336 pixels durante o redimensionamento, o #fastback elemento se moverá.