固定位置divを修正して再配置する方法

Question

まず、誤解を招く場合は、私のタイトルをお詫び申し上げます。実際、私はこれのより良いタイトルを知らないので、私はこれのようにそれを与えたのです。誰でもこのソリューションのより良いタイトルを手に入れることができれば、親切に私が変更に手伝ってください。

私の問題は、私のWeb開発者の一人が、divの位置を固定して、すべてのdivを適切に配置したページを作成したことです。問題が発生したので、すべてをブラウザの中心に移動したい。私はdiv全体をラップして中心に移動しようとしました。しかし、位置のために移動しません：固定、左に揃えます。それはあまりにも多いので、私は左の位置を計算して移動したくありません。どのようにすればよいのですか？私は何を話しているのかを知るためのコードをいくつか含んだ。私の質問が本当に役に立たないなら、親切に私に知らせてください、私はもっと説明します。

HTML

<div id="apDiv1"><img src="images/bg.png" /></div> 
<div id="apDiv2"><img src="images/border1.png" /></div> 
<div id="apDiv3"><img src="images/border2.png" width="130" height="450" /></div> 
<div id="apDiv4"><img src="images/bar1.png" width="128" height="450" /></div> 
<div id="apDiv5"><img src="images/bar2.jpg" width="110" height="164" /></div> 
<div id="apDiv6"><img src="images/bar3.jpg" width="110" height="164" /></div> 
<div id="apDiv7"><img src="images/button1.jpg" width="110" height="164" /></div> 
<div id="apDiv8"><img src="images/button2.jpg" width="110" height="164" /></div> 
<div id="apDiv9"><img src="images/button3.jpg" width="286" height="23" /></div> 
<div id="apDiv10"><img src="images/redbar.jpg" width="286" height="23" /></div> 
<div id="apDiv11"><img src="images/redbar.jpg" width="286" height="23" /></div> 
<div id="apDiv12"><img src="images/redbar.jpg" width="286" height="23" /></div> 
<div id="apDiv13"><img src="images/gobtn.png" /></div> 
<div id="apDiv14"><img src="images/submitbtn.png" /></div> 
<div id="apDiv15"><img src="images/submitbtn3.png" /></div> 
<div id="apDiv16"><img src="images/downloadbtn.png" /></div> 

CSS

#apDiv1 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:-1; 
    left:120px; 
} 

#apDiv2 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:2; 
    left: 380px; 
    top: 108px; 
} 
#apDiv3 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:2; 
    left: 248px; 
    top: 108px; 
} 
#apDiv4 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:2; 
    left: 120px; 
    top: 108px; 
} 
#apDiv5 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:2; 
    left: 380px; 
    top: 195px; 
} 
#apDiv6 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:2; 
    left: 677px; 
    top: 196px; 
} 
#apDiv7 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:2; 
    left: 380px; 
    top: 387px; 
} 
#apDiv8 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:2; 
    left: 677px; 
    top: 387px; 
} 
#apDiv9 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 380px; 
    top: 171px; 
} 
#apDiv10 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 677px; 
    top: 171px; 
} 
#apDiv11 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 677px; 
    top: 362px; 
} 
#apDiv12 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 380px; 
    top: 362px; 
} 
#apDiv13 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 579px; 
    top: 346px; 
} 
#apDiv14 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 875px; 
    top: 346px; 
} 
#apDiv15 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 579px; 
    top: 538px; 
} 
#apDiv16 { 
    position:fixed; 
    width:200px; 
    height:115px; 
    z-index:1; 
    left: 875px; 
    top: 538px; 
} 

みんなありがとう。 :)

Answer 1

固定位置要素は、ブラウザウィンドウに対して配置されます。それは親要素によって制御されません。したがって、divでラップしてラッパーの位置に従わせることはできません。ポジションを変更する場合は、固定ディビジョンの値を再調整する必要があります。私はあなたが非常に多くの要素に固定位置を使用したい理由はありません。良い習慣ではありません。

Answer 2

あなたはこのJavascriptを（すべてのdivの後に配置）を使用することができ、ページ全体を再設計し、ちょうどあなたが必要とするが、多くのピクセルmoveLeftの値を変更したくない場合は、次の

<script type="text/javascript"> 
var moveLeft = 100, 
    elems = document.getElementsByTagName('div'), 
    el = elems.length; 

for (var i = 0; i < el; i++) { 
    if (/apDiv/.test(elems[i].id)) { 
     elems[i].style.left = (elems[i].offsetLeft - moveLeft) + 'px'; 
    } 
} 
</script>