Javascript 是否可以相对于非父div设置div位置，或者是否有更好的方法？

我正在为一家乡村家具公司做一个常见问题页面。这些问题是按钮，单击后可展开以显示答案。现在，我要么把页脚放低，这样它就不会重叠，看起来很糟糕，要么让它重叠，看起来也很糟糕

问题是，按钮（以及它们显示的文本）需要在辅助背景中居中，但页脚需要跨越页面的100%宽度。如果我将页脚设置为问题div的子项

width=100%

则页脚仅跨问题div

我希望页脚在问题的答案展开时向下移动，因此我需要页脚的垂直位置相对于问题div

<div id="questions" class="auto-style22" style="position: absolute; width: 591px; height: 466px; z-index: 8; left: 395px; top: 323px">
<script type="text/javascript">
function toggleMe(a){
 //Collapse all answers
   var elements=document.getElementsByClassName("button");
   for (var i=0;i<elements.length;i+=1){
    elements[i].style.display = 'none';
   }
 //Toggle a particular answer
 var e=document.getElementById(a);
 if(!e) return true;
 if(e.style.display=="none"){
  e.style.display="block"
 }
 else{
  e.style.display="none"
 }
 return true;   
}</script>

<input type="button"  onclick="return toggleMe('para1');" value="What is Buffalo Ranch?" class="buttonClass"><br>
<div class="button" id="para1" style="display:none" >

    <br>Buffalo Ranch Rustic Home Furnishings is a locally owned and operated retail store featuring a unique collection of ranch and lodge décor, western art, fine antiques, and collectibles. We have a variety of taxidermy mounts, hair on hide leather furniture and other leather goods (bags, wallets, coasters, etc). We also carry beautiful western inspired jewelry, bedding and gifts. We have everything you need to accessorize yourself and your rustic home, except the fresh country air, that is!
</div>
<br>
<input type="button" onclick="return toggleMe('para2')" value="Where are you located?" class="buttonClass"><br>
<div class="button" id="para2" style="display:none" >
<br>
We are located at 123 Main Street in the quaint and historic little town of Nowhere.
</div>
</div>
div id="footer" style="position: relative; width: 100%; height: 125px; top: 966px; left: 0px;">
    <img class="footer" height=475 src="Graphics/Blue%20Footer.png" width="100%"></div>

功能切换表（a）{
//折叠所有答案
var elements=document.getElementsByClassName（“按钮”）；
对于（var i=0；i

显然还有很多问题，但为了简短起见，我只提出了2个问题

编辑：这里有一个我现在的截图。页脚开始很低，是静态的，但在打开一个问题之前它看起来并不正确，因为只有一堆空格。

将问题

位置

作为相对，删除

高度

并添加

最小高度：200px

（或任何其他值），从

#footer

中删除

top

属性。现在，如果单击任何按钮，页脚将自动向下移动

#问题{
最小高度：200px；
边缘底部：10px；
}
#页脚{
背景：黄色；
}

功能切换表（a）{
//折叠所有答案
var elements=document.getElementsByClassName（“按钮”）；
对于（var i=0；很明显，我不明白你想做什么。你能发布一些图片或参考一些网站，以便我们了解你的要求吗？你到底想要什么？你想限制问题div重叠到页脚div吗？如果你可以共享屏幕截图或把它摆弄就好了。现在有一个屏幕截图。页脚开始向下，所以它不能重叠，但在问题被打开之前，这看起来很糟糕。设置相对位置并使其成为问题分区的子项的问题是页脚需要跨过页面的100%宽度，而不是任务的100%宽度ions div.Sahil，谢谢你的建议。当我运行你的代码段时，页脚不会相对于问题移动。我怀疑这是因为页脚div不是问题div的子项，但我不能使其成为问题div的子项，并使其跨越页面的100%宽度，而不是其父项div。你可以在代码段中检查它现在，我减少了#问题的最小高度，以便可以清楚地看到页脚的移动。