html - 只想让模式中的关闭按钮溢出可见

Question

我想显示完整的关闭按钮/文本，同时保持模态的 position:fixed 和 overflow:scroll 如果我用 overflow:visible 替换 overflow:scroll 它会完全显示但停止滚动

<div id="root_component">
       <div class="modal" >
               <a class="modal-close btn-floating btn-small 
                   waves-effect waves-light right clearfix">
                        <i class="material-icons">cancel</i>
                    </a>
          <div class="modal-content"></div>
     </div>    
</div>



.modal {
        width: 80% !important;
        overflow-y: scroll;
        z-index: 1003;
        display: block;
        opacity: 1;
        transform: scaleX(1) scaleY(1);
        position: fixed;
        padding: 0;
        margin: auto;
        border-radius: 2px;
    }
    #root_component .clearfix {
        position: absolute;
        right: -16px;
        top: -16px;
        z-index: 100;
    }

screenshot attached

Answer 1

只需将您的 .parent div 包装在另一个 .parent-wrapper div 中，然后将您的 .child div 从 .parent 中取出。这有效:

    .grand-parent {
      position: relative;
      height: 10px;
      width: 10px;
      background: red;
      top: 10px;
    }

    .parent-wrapper {
      height: 150px;
      width: 60px;
      position: fixed;
    }

    .parent {
      height: 150px;
      width: 60px;
      overflow: scroll;
      background: blue;
    }

    .child {
      overflow: visible;
      position: absolute;
      top: 10px;
      left: 20px;
      background: yellow;
    }

<div class="grand-parent">
      <div></div>
      <div class="parent-wrapper">
        <div class="parent">adfasdf<br> asdf
          <br> asdf
          <br> adsf
          <br> asdfasd
          <br> fads
          <br> fdsaf
          <br> sadfasd
          <br> afdsf
        </div>
        <div class="child"> close</div>
      </div>
    </div>