親に対して固定された要素の位置がIEで動作していない場合？

Question

親に対して固定の要素の位置がInternet Explorerで動作していない場合は、 要素が固定されている場合、親が相対的な位置にあるかどうかは関係ありません。 Internet Explorerのウィンドウに相対的に固定されます。

コード：GoogleのChromeとFirefoxなどの他のブラウザでは正しく整列固定

// Content DIV 
 
.row { 
 
    width: 1200px; 
 
    margin: 0 auto; 
 
    vertical-align: top; 
 
    text-align: center; 
 
    font-size: 0; 
 
    position: relative; 
 
} 
 
// Call Action DIv 
 
.CallActionR { 
 
    position: relative; 
 
} 
 
.CallActionA { 
 
    position: absolute; 
 
    right: 0; 
 
} 
 
.CallActionContainer { 
 
    position: fixed; 
 
    z-index: 9999; 
 
    opacity: 1; 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
    transform: translateZ(0px); 
 
    transition: all 2s linear; 
 
    right: 0; 
 
} 
 
.CallActionDisplay { 
 
    margin: 0px; 
 
    width: 200px; 
 
    height: 58px; 
 
    border: 0px none rgb(0, 0, 0); 
 
    background-color: rgba(59, 110, 142, 0.74902); 
 
    background-size: 100% 100%; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 12px; 
 
    font-weight: normal; 
 
    color: rgb(241, 241, 241); 
 
    text-decoration: none; 
 
    word-wrap: break-word; 
 
    white-space: normal; 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
    z-index: 9999; 
 
    padding: 18px 15px; 
 
    font-weight: 600; 
 
    position: fixed; 
 
    right: 0px; 
 
}

<div class="row"> 
 
    <div class="CallActionR"> 
 
    <div class="CallActionA"> 
 
     <div class="CallActionContainer"> 
 
     <div class="CallAction">Call TO Action</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ポジション。しかしIE 11に来ることは正しく働いていません。相対ウィンドウに基づいて位置が固定されていない<div>。

Answer 1

私はちょうど同じ問題に遭遇しました。 IEを除いて実際にはほとんどのブラウザ（Firefox/Chrome）が私が望んだことをしていたところ、間違った動作になっていました。しかし、 'トランスフォーム'を使用しているため、IE内で固定された位置を '中断'します（他のブラウザでは不可）。これは、IEと他のブラウザ間で異なる動作を引き起こしています。

私の説明はあまり明確ではないかもしれませんので、http://tympanus.net/codrops/css_reference/position/（最後の段落トリビア&注）を読んでください。