美文网首页
解决弹窗被遮罩问题

解决弹窗被遮罩问题

作者: 进击的三文鱼 | 来源:发表于2019-05-29 09:25 被阅读0次

    在引入react控件时出现了部分弹窗被遮罩的问题。

    image.png

    分析原因,首先想到是显示的层级问题。于是想到z-index;

    DOM的自然层级,子级高于父级,页面上排列靠下的高于在上边的。所以,想要弹框层级最高,直接放最下边就好。
    z-index的影响范围仅限同级元素,并不是页面全局的层级。
    但是修改显示出了部分,还是没有全部显示。

    最终发现,原来是弹窗的父级div的高度不够,导致显示不全。
    修改代码为

    .app .card-container .ant-tabs-card > .ant-tabs-content {
      padding: 0px;
      height: auto;
      min-height: 400px;
    }
    .react-datepicker-popper{
      z-index: 100!important;
    }
    

    相关文章

      网友评论

          本文标题:解决弹窗被遮罩问题

          本文链接:https://www.haomeiwen.com/subject/ankrtctx.html