Question

我想显示完全关闭按钮/文本，同时保持模式的位置：固定和overflow:scroll 如果我将overflow：scroll替换为overflow：visible，它将完全显示但停止滚动

<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格换成另一个.parent-wrapper格，然后将.child格从.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>

Answer 2

如果这是您要尝试的操作，则必须设置.child类的位置fixed。关闭按钮/文本位置将固定，无论在div上滚动。

.grand-parent {
  position: relative;
  height: 10px;
  width: 10px;
  background: red;
  top: 10px;
}

.parent {
  height: 150px;
  width: 60px;
  overflow: scroll;
  background: blue;
  position: fixed;
}

.child {
  overflow: visible;
  position: fixed;
  top: 20px;
  left: 30px;
  background: yellow;
}

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

想要在模式内部使仅关闭按钮溢出可见

2 个答案: