私は次の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>
そして、そのためのCCSは次のとおりです。
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;
}
ただし、ブラウザウィンドウのサイズを変更すると、「fast-back」divが右に移動します。
どうすればこの動作を防ぐことができますか？
ありがとう！
回答：
回答№1は0見つめている #fastback CSSルール、ピクセルではなくパーセンテージを使用しています margin-left。測定単位としてピクセルに変更します。
パーセンテージを測定単位として使用している場合、要素の左マージンは、この場合、ビューポートに対して移動します。
一方、ピクセルを使用している場合、ブラウザのサイズが変更されても、マージンは同じ場所に残ります。
更新
解決策は、幅を削除することです #container。次のリンクを参照してください。
http://jsfiddle.net/jlratwil/LB8rf/1/
コンテナの幅が1336ピクセルに設定され、中央揃えで配置されるため、最初のソリューションが機能しない理由 margin: 0 auto。サイズ変更中にブラウザのビューポートの幅が1336ピクセルを超えると、 #fastback 要素が移動します。