css - 为什么我的 JsFiddle 中的 CSS 在我的服务器中的工作方式不同？

Question

我有以下 JSFiddle，它在弹出窗口的左侧放置一个“X”: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>

如果我将这个完全相同的 CSS 和 HTML 复制到我在 byethost.com 上的文件中，“x”会出现在屏幕中央。我用 <style type="text/css"> </style> 包围了 CSS在头上。 HTML 在正文中。我已经尝试将此 CSS 和 HTML 复制到另一个 JSFiddle 中并且它有效，所以它似乎与 Byethost 有关。

没有与此相关的控制台错误。

这是实际的站点。显示弹出窗口的按钮位于最底部。它说“发布消息”http://carouseltest.byethost8.com/aplayground.php (控制台上的 2 个错误都与此代码无关。在我添加此代码之前它们就在那里。)

这是它在 Byethost 上的显示方式的照片:http://imgur.com/a/BSzER

Answer 1

看起来 position: fixed 正在被覆盖(尽管很难确定它何时不可重现)。尝试更新为:

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