需要在父元素之外创建一个具有溢出自动的元素

Question

In the following code, I need to make the close icon positioned outside the div. I can't use overflow: hidden; . Is there anyway to get this sorted without using overflow: hidden; or position: fixed for the close div.

JSFiddle of below code here: 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

The overflow-y: auto; on dialog element is the issue. It will behave the same as overflow-hidden in this case, making the child element close icon invisible if it's placed outside.

If you can't remove the overflow-y: auto; then you should wrap the dialog in another div (that has no overflow value set but has position: relative set) and then also make the close icon a direct child of that element.

Like this:

<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>

Answer 2

从.dialog类中删除overflow-y:auto