ポップアップ内の固定要素

Question

ポップアップの中に「X」ボタンを固定したいと思います。

しかし、位置：固定&位置：絶対両方が動作していません。

IOS google chromeとsafariを使用しているとうまく動作します。

HTML：

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

CSS：助けを

.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; 
} 

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