Question

我有一个X（to .hide）灯箱。在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

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

使用position: relative做你正在做的事情可能会意外地发挥作用。

进一步阅读，Learn CSS Positioning in Ten Steps

Answer 2

我个人认为最好使div包含btn位置：relative和按钮本身位置绝对。这适用于每个浏览器！

示例：

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

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

位置：相对底部：91％，firefox无法正常工作

2 个答案: