Question

首先，如果我的头衔具有误导性，请对不起。实际上，我不知道这个更好的标题，这就是我这样给它的原因。如果有人能为这个解决方案获得更好的头衔，请帮助我改变。

我的问题是，我的一位网络开发人员创建了固定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包装它并使它跟随你的包装器的位置。如果要更改其位置，则需要重新调整每个固定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>

如何修复和重新安排固定位置div

2 个答案: