css弹出层背后能滚动

CSS弹出层背后能滚动是一种常见的Web开发技术，该技术可以让用户在弹出层出现时仍然能够滚动后面的内容，提高了用户体验。

//CSS.modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      max-height: 80%;
      overflow-y: auto;
      z-index: 999;
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.overlay {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.6);
      z-index: 998;
}
    

上面的代码使用了position: fixed将弹出层固定在屏幕上，并设置了top、left以及transform属性让弹出层居中。同时，使用了max-height和overflow-y属性限制了弹出层的最大高度，并且设置overflow-y为auto实现了内容的滚动条。此外，z-index属性的值也需要设置得比背景层小，这里设置为998。另外，添加了一个黑色的半透明背景层，使用rgba设置颜色并令alpha为0.6。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！