私は必要なものが固定位置の画像ですか？

Question

固定/絶対配置の画像に問題があります。

参照のための例を参照してください：それらが正しく配置されている現時点では http://www.warface.co.uk/clients/warface.co.uk/

を、しかしユーザーは赤い矢印ボックス（トップセンター）をクリックしたときに、あなたが固定位置の画像が静的であることがわかりますし、必要に応じてページを下にスライドさせないでください。私は彼らが相対的な位置に置かなければならないと確信していますが、ブラウザがサイズ変更されたときに飛び回っているようです。提案された方法で

任意のアイデアが高く評価されている:)

を多くの感謝

CSS

.minipeak { 
    background: url("styles/images/home-peak2.png")no-repeat 0 0; 
    width:206px; 
    height:138px; 
    display:block; 
    float:right; 
    top:288px; 
    right:91%; 
    position: fixed; 
    z-index: 0; 
    } 
.twinpeaks { 
    background: url("styles/images/home-peaks.png")no-repeat 0 0; 
    width:624px; 
    height:349px; 
    display:block; 
    position:fixed; 
    float:left; 
    left:56%; 
    top:220px; 
    z-index: 0; 
    overflow: hidden; 
    } 
.riflebg { 
    background: url("styles/images/home-rifle2.png")no-repeat 0 0; 
    width:254px; 
    height:199px; 
    display:block; 
    top:110px; 
    left:330px; 
    position: relative; 
    float:left; 
    z-index: 1; 
    } 
.tank { 
    background: url("styles/images/home-tank.png")no-repeat 0 0; 
    width:520px; 
    height:285px; 
    display:block; 
    top:150px; 
    overflow: hidden; 
    right:-340px; 
    position:relative; 
    z-index: 2; 
    float:right; 
    } 
.snipers { 
    background: url("styles/images/home-snipers.png")no-repeat 0 0; 
    width:520px; 
    height:285px; 
    display:block; 
    top:230px; 
    right:66%; 
    float:right; 
    position:fixed; 
    z-index: 3; 
    } 
.privatejoker { 
    background: url("styles/images/home-privatejoker.png")no-repeat 0 0; 
    width:421px; 
    height:397px; 
    display:block; 
    top:80px; 
    position: absolute; 
    float:left; 
    z-index: 4; 
    } 
.rifle { 
    background: url("styles/images/home-rifle.png")no-repeat 0 0; 
    width:520px; 
    height:285px; 
    display:block; 
    top:250px; 
    left:330px; 
    position: absolute; 
    float:left; 
    z-index: 5; 
    } 

Answer 1

(^_^)このような「privatejoker」&はすべてあなたの「メイン」 - 含有量（狙撃手など）をラップ親コンテナを作成し、作る、「ライフル」と一緒にラッパーの内側にそれを入れてみてくださいそれposition: relative;（ので、すべての「絶対」チャイルズはアンカーとしてこれを参照してください。

使用position: absolute;すべての要素（狙撃などの）、すべてを持って、左/右/上/下OR（負）のマージンを経由して位置を微調整

あなたの "飛び回る"ことは説明することができますsiいくつかの場所で相対値（パーセンテージ）を使用します - これらはビューポートのサイズに依存します。一定のピクセル値を使用するか、またはあなたがそのサイトを参照している間ほとんどの人がウィンドウのサイズを変更しないという事実を受け入れるかのどちらかです。

Answer 2

'twinpeaks' は、したがって、なぜそれラッパーの外にあるあなたの '狙撃' &クリックしてスライドさせると、一緒にスライドしませんでした。