css溢出，元素移到div之外，元素消失

Question

我在 div 中有一个表单，我将提交按钮从 div 带到屏幕的另一部分。这很好用。但是，我想将该 div 锁定到特定大小和相对位置并使用 overflow:auto 所以当它变得太大时（表单具有未被复选框隐藏的元素）整个屏幕不会滚动，只是 div。问题是，一旦我添加了溢出样式，我移出 div 的提交框就被隐藏了。我认为这是因为溢出所有元素都被锁定到该 div 并且滚动条允许您访问它们，但在这种情况下，元素向左移动：-500px，它甚至没有给我一个滚动条向左滚动到看他们。基本代码如下：

<div class="div1">
 <div class="div2">
  <form>
   <input type="submit" class="sub1" />
  </form>
 </div>
</div>`

CSS 将是：

div.div1 {
 position:relative;
 width:1000px;
 margin: 0 auto;
}
div.div2 {
 width:500px;
 height:500px;
 position:absolute;
 top:125px;
 left:500px;
}
input[type=submit].sub1 {
 position:absolute;
 left: -500px;
}

所以这行得通，但是一旦我将 div2 css 更改为：

div.div2 {
 width:500px;
 height:500px;
 position:absolute;
 top:125px;
 left:500px;
 overflow:auto;
}

提交按钮消失。

我的问题：有什么方法可以让滚动条保持 div2 容器的高度为 500px，而不会丢失 div 之外的元素？

Answer 1

如果我理解正确，您可以将div2 移动到form 内，并将提交按钮留在div2 之外。这样，提交按钮将始终可见，div2 可能会溢出。

<div class="div1">
  <form>
    <div class="div2">
      <!-- form fields go here -->
    </div>
    <input type="submit" class="sub1" />
  </form>
</div>

注意：您可能需要调整按钮的样式，但我不完全确定您的最终目标。