如何修復和重新安排固定位置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>