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;
}

提交按钮消失。

我的问题：有没有什么方法可以在不丢失 div 之外的元素的情况下获取滚动条并将 div2 容器保持在 500px 高度？

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>

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

css 元素移出 div 溢出，元素消失

css overflow with elements moved outside div, elements disappear

css-position

overflow