修复弹出窗口内的元素

Question

我想在弹出窗口和粘性顶部修复“X”按钮。

但位置：固定＆amp;位置：绝对都不起作用。

如果我使用IOS google chrome和safari，它会正常工作。

.popup-inner {
  position: absolute;
  bottom: 0px;
  overflow: auto;
  padding-bottom: 30px;
  -webkit-text-size-adjust: none;
}

.popup-close {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 25px;
  right: 20px;
}

<a class="btn" data-popup-open="popup-1" href="#"><i class="fa fa-globe" aria-hidden="true"></i>popup</a>
<div class="popup" data-popup="popup-1">
  <div class="popup-overlay"></div>
  <div class="popup-inner">
    <div class="fixed-content">
      <div class="col-main">
        <div>123</div>
        <div class="content">
          <ul>
            <li>
              <a>
                <span>aaaaa</span>
                <div class="lan">bbbb</div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <a class="popup-close" data-popup-close="popup-1" href="#">
      <div class="popup-icon"></div>
    </a>
  </div>
</div>

JSFiddle Here

感谢您的帮助。

Answer 1

我会建议一些CSS修复

CSS

.popup-icon{
  height:30px;
  width:30px;
  position: relative;
}

.popup-icon:before,
.popup-icon:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #aaa;
    margin: auto;
}

Link for reference