为什么不是'；JSFIDLE中的CSS在我的服务器中的工作方式是否相同？

我有以下JSFIDLE，它在弹出窗口的左侧放置一个“X”：

CSS:

HTML

Sed-ut-perpiciatis，unde-omnis…

如果我将完全相同的CSS和HTML复制到byethost.com上的文件中，屏幕中央会出现“x”。我用

在头部包围CSS。HTML在正文中。我试着将这个CSS和HTML复制到另一个JSFIDLE中，它可以正常工作，所以它似乎与Byethost有关

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

这是实际的网站。显示弹出的按钮位于最底部。上面写着“Post Message”（控制台上的两个错误都与此代码无关。它们在我添加此代码之前就存在了。）

---

下面是一张它在Byethost上出现的照片：

看起来像是

位置：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;
}

---

在您的站点上，按F12并阅读errors@j08691这些错误都与此无关；在我把这个放到网站上之前他们就在那里了。

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

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