如何防止我的 JavaScript 手风琴将内容推到它上面？

Question

我正在使用手风琴在我的网站上显示信息，但是当打开手风琴时，它会将上面的内容推上去。当手风琴打开时，它会上下展开，但我希望它只向下打开，以避免将上面的内容推上去。这是我的代码：

HTML

<div class="content">
  <h1>About</h1>
  <p>This page will include information about stuff</p>
  <div id="accordion">
    <h3>President</h3>
    <div class="introductions">
      <p>info text</p>
      <img src="images\placeholder.png" />
    </div>
    <h3>Vice President:</h3>
    <div class="introductions">
      <p>info text</p>
      <img src="images\placeholder.png" />
    </div>
    <h3>Secratary:</h3>
    <div class="introductions">
      <p>info text</p>
      <img src="images\placeholder.png" />
    </div>
    <h3>Treasurer:</h3>
    <div class="introductions">
      <p>info text</p>
      <img src="images\placeholder.png" />
    </div>
  </div>
</div>

CSS

#accordion{
   width: 800px;
   text-align: center;
   padding: 10px;
   overflow: hidden;
   margin-left: auto;
   margin-right: auto;
}

在我的 CSS 末尾添加

position: relative;

修复了手风琴将内容推到其上方的问题，但它也破坏了导致手风琴不居中的边距。
不知道如何解决这个问题，感谢任何帮助。