javascript - 需要在具有 overflow-y auto 的父元素之外创建一个元素

Question

在下面的代码中，我需要将关闭图标放置在 div 之外。我不能使用 overflow: hidden;。有没有办法在不使用 overflow: hidden; 或 position: fixed 关闭 div 的情况下进行排序。

以下代码的 JSFiddle:https://jsfiddle.net/mannyuiux/jhwu9n4r/4/ .

<!-- HTML -->
<div tabindex="-1" class="dialog__content dialog__content__active" style="z-index: 202;">
  <div class="dialog dialog--active" style="width: 1000px;">
    <div class="card">
      <div class="close">
        <img src="http://cdn.onlinewebfonts.com/svg/img_211963.png" alt="Close" />
      </div>
    </div>
  </div>
</div>

/* CSS */
.dialog__content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: 0.3s ease-in-out;
    width: 100%;
    z-index: 6;
    outline: none;
  }


  .dialog {
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    margin: 24px;
    overflow-y: auto;
    pointer-events: auto;
    transition: 0.3s ease-in-out;
    width: 100%;
    z-index: inherit;
  }
  .dialog:not(.dialog--fullscreen) {
    max-height: 90%;
  }
  .card {
    padding: 0;
    padding-top: 70px;
    background-color: #fff;
    color: rgba(0, 0, 0, 0.87);
    display: block;
    border-radius: 2px;
    min-width: 0;
    position: relative;
    text-decoration: none;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  }
  .close {
    position: absolute;
    top: -20px;
    right: 0;
    height: 12px;
    width: 12px;
  }
  .close img {
    max-width: 100%;
  }

Answer 1

dialog 元素上的 overflow-y: auto; 是问题所在。在这种情况下，它的行为与 overflow-hidden 相同，如果子元素放在外面，则关闭图标不可见。

如果您不能删除 overflow-y: auto; 那么您应该将对话框包装在另一个 div 中(没有设置溢出值但有 position: relative 设置)，然后还使关闭图标成为该元素的直接子元素。

像这样:

<div style="position: relative">
  <div class="dialog dialog--active" style="width: 1000px;">
    <div class="card" />
  </div>
  <div class="close">
    <img src="http://cdn.onlinewebfonts.com/svg/img_211963.png" alt="Close" />
  </div>
</div>