如何更改此滑动文本区域的位置？

Question

我正在尝试向我正在使用的网站添加免责声明部分。我想要在每个页面的底部都有一个类似标签的按钮，它会打开一个文本区域。

我稍微搜索了一下 codepen.io，发现了一种非常简单的方法。删除不相关的语法后，我尝试将选项卡从页面顶部移动到底部。

这是我遇到问题的地方。当标签位于页面顶部时，文本区域会在点击时将标签下推。

现在它位于底部，文本区域显示在选项卡上方，因为选项卡本身位于页面底部。

如何确保文本区域在选项卡下方弹出，将选项卡向上推？

$(document).on('click', '#menu-tab', function() {
  $('#menu-nav').slideToggle('slow');
});

body {
  background-color: #333333;
  text-align: center;
}
#menu-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
#menu-tab {
  background-color: #FC4349;
  cursor: pointer;
  margin: 0% 45% 0% 45%;
  padding: 5px 10px;
}
#menu-nav {
  display: none;
  background-color: #FC4349;
  margin: 0% 30% 0% 30%;
}

<body>
  <div id="menu-wrapper">
    <div id="menu-nav">disclaimertextdisclaimertextdisclaimertext
      <br>disclaimertextdisclaimertextdisclaimertext</div>
    <div id="menu-tab" class="closed">Disclaimer</div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>

如果我的描述没有给出清楚的情况：

屏幕顶部的标签

屏幕底部的标签

Answer 1

将包含免责声明的 html 移至选项卡下方

(Demo)

<div id="menu-wrapper">
  <div id="menu-tab" class="closed">Disclaimer</div>
  <div id="menu-nav">disclaimertextdisclaimertextdisclaimertext
    <br>disclaimertextdisclaimertextdisclaimertext</div>
</div>

如何更改此滑动文本区域的位置？

How do I change the position of this sliding text-area?

html

javascript

css

position