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＆amp;将HTML放入byethost.com的文件中，“x”出现在屏幕的中央。我用头部<style type="text/css"> </style>包围了CSS。 HTML就在体内。我试过复制这个CSS＆amp; HTML到另一个JSFiddle并且它可以工作，所以它似乎与Byethost有关。

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

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

以下是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;
}

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

1 个答案: