css - 位置：相对底部：91%，firefox 不工作

Question

我有一个 X（隐藏）一个灯箱。在 chrome 中，x 位于正确的位置（右上角），但是在 Fire fox 中进行测试时，它似乎完全忽略了它，而是将 X 放在右下角。

 .btn_close{
    background: url( img goes here);
    position: relative;
    bottom: 91%;
    height:25px;
    width:25px;
    background-position:0 0;    
    right: 1.5%;    
}

是否有特定的解决方法，或者我错过了一些关键。它再次在 chrome 版本中工作/看起来很好。

编辑：我忘了提到它是一个带有 iframe 的灯箱。我认为它主要与 iframe 导致问题（安全功能？）有关，通过将其切换为绝对，但是它会移动所有 X，但它似乎仍然将它塞在框架下。

Answer 1

Make.btn-close的位置absolute和灯箱的位置relative。

做你正在做的事情position: relative可能会出乎意料地工作。

如需进一步阅读，请通过十步学习 CSS 定位

Answer 2

我个人认为让包含 btn position:relative 的 div 和按钮本身的绝对位置是更好的做法。这适用于每个浏览器！

例子：

    #container{
     Position: relative;
     Width:300px;
     Height:300px;
     Overflow:hidden;
    }

  .btn–close{
     Position:absolute;
     Bottom:10px;
     Right:5px
     ...
   }