如何让固定元素在弹出对话框中与父元素一起滚动？

Question

我会尽量说得清楚。

我在页面上弹出一个

dialog

，该对话框可能包含很多必须可滚动的信息。在对话框中，我有自定义下拉菜单，例如需要从对话框中弹出的日期选择器，类似于单击时

select

的操作。

如果我设置

position:absolute

，它会打开，但在对话框内。这不是我们需要的。如果我尝试

position:fixed

那么乍一看它看起来很棒，但是当我滚动时，它会与其父级断开连接。

我阅读了数十篇文章和答案，还查看了许多代码笔。虽然我找不到一个有效的例子。

这是我构建的codepen：https://codepen.io/yisman/pen/VwgLxEv

我将不胜感激任何帮助。

蒂亚

html {
  height: 100%;
}
body {
  height: 100%;
  margin:0px
}
#mainbody {
  background-color: green;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#maincontenet {
  overflow-y: auto;
  background-color: blue;
  flex-grow:1 /*not critical*/
}
#popout{
  background-color: yellow; 
  /*position:absolute;*/
  position:fixed;
}
#innerwrap{
  position:relative;
 }
#dialog{
  display:flex;
  flex-wrap:wrap;
  max-width:30vw;
   max-height:20vh;
  overflow-y:auto;
  
}

<dialog open id="dialog">
      <input value="washington"/>
   <div id="innerwrap">
     <input value="george"/>
    <div id="popout">
      read more and more<br/> 
      and more and more and more<br/> 
       and more and more and more<br/> 
       and more and more and more<br/> 
     </div>
   </div>
     <input value="president"/>
    <input value="president"/>
   <input value="president"/>
   <input value="president"/>
     <input value="president"/>
   <input value="president"/>
   <input value="president"/>
    <input value="president"/>
   <input value="president"/>
   <input value="president"/>
    <input value="president"/>
   <input value="president"/>
   <input value="president"/>
    </dialog>
<div id="mainbody">
  
  HEADER
  <div id="maincontenet">
   
    A<br />
    B<br />
    C<br />
    D<br />
    E<br />
    F<br />    
    G<br />
    H<br />
    I<br />
    J<br />
    K<br />
    L<br />
  </div>
  FOOTER
</div>

Answer 1

使用

overflow: hidden/auto/scroll

打破父容器，同时保持正确的定位并非易事。您还有其他几个选择：

使用

<select>

或

<input type="date">

作为日期选择器。这些将始终相对于

<dialog>

和其他顶层元素正确分层。此外，这些本机控件在移动设备和平板电脑上提供了更好的用户体验。

或者，如果您绝对必须使用非本机选择/输入解决方案，请考虑将对话框转换为应用程序中自己的页面。当对话框变得太长而需要滚动时，通常表明它太长了。

或者，如果可能的话，请确保您的对话框不包含太多内容，以便可以安全地拥有

overflow: visible

。这样你就没有溢出限制。