JsFiddleのCSSが私のサーバーで同じように動作しないのはなぜですか？

Question

私はポップアウトウィンドウの左側にある "X" を配置し、以下のJSFiddleを、持っている：http://jsfiddle.net/XDaEk/601/

CSS：

.x { 
    display: none; 
    position: fixed; 
    top: 25%; 
    left:60px; 
    transition: transform .25s ease-in-out; 
} 

.x:before { 
    content: ""; 
    position: absolute; 
    display: block; 
    margin: auto; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 32px; 
    height: 0; 
    border-top: 3px solid black; 
    transform: rotate(45deg); 
    transform-origin: center; 
} 
.x:after { 
    content: ""; 
    position: absolute; 
    display: block; 
    margin: auto; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 32px; 
    height: 0; 
    border-top: 3px solid black; 
    transform: rotate(-45deg); 
    transform-origin: center; 
} 


.alert-div { 
    display:none; 
    position: fixed; 
    top: 0%; 
    left: 0%; 
    height: 100%; 
    width: 100%; 
    padding-left: 50px; 
    padding-bottom: 50px; 
    padding-right: 50px; 
    padding-top: 50px; 
    background-color: white; 
    color: white; 
    opacity:0.7; 
    overflow-y: auto; 
} 

HTML

<div class="alert-div2"> <div class="x"></div>Sed ut perspiciatis, unde omnis …</div> 

私はこれをコピーする場合byethost.com上の私のファイルに全く同じCSS & HTMLがあると、 "x"が画面の中央に表示されます。私は頭の中で<style type="text/css"> </style>とCSSを囲んだ。 HTMLは本文の中にあります。私はこのCSS &のHTMLを別のJSFiddleにコピーしようとしましたが、うまくいきましたので、Byethostと何か関係があるようです。

これに関連するコンソールエラーはありません。

ここは実際のサイトです。ポップアウトを表示するボタンは一番下にあります。これは、（コンソール上の2つのエラーのどちらもが、このコードを実行する必要があり、私はこれを追加する前に彼らがいた。。）「POSTメッセージ」http://carouseltest.byethost8.com/aplayground.php言う

ここではByethostどのように表示されるかの写真です：http://imgur.com/a/BSzER

Answer 1

position: fixedがオーバーライドされているように見えます（ただし、再現できない場合は特定できません）。アップデートしてみてください：あなたのサイトのプレスF12で

.x { 
    display: none; 

    /* add !important in case this is what's getting zapped and affecting layout */ 
    position: fixed !important; 

    top: 25%; 
    left:60px; 
    transition: transform .25s ease-in-out; 
}