Html 当firefox浏览器窗口未全屏打开时，为什么我的链接不起作用？_Html_Css_Css Selectors

Html 当firefox浏览器窗口未全屏打开时，为什么我的链接不起作用？

html css

Html 当firefox浏览器窗口未全屏打开时，为什么我的链接不起作用？,html,css,css-selectors,Html,Css,Css Selectors,在我的html页面中，页面顶部有两个链接： <div id='my-link'> <a class="school" href="../school.html" target="_blank">School</a> <a class="police" href="../police.html" target="_blank">Police</a> </div> 我在firefox 3.6.16上进行

在我的html页面中，页面顶部有两个链接：

<div id='my-link'>
    <a class="school" href="../school.html" target="_blank">School</a> 
    <a class="police" href="../police.html" target="_blank">Police</a> 
 </div>

我在firefox 3.6.16上进行了测试，当我以全屏打开firefox浏览器窗口时，链接成功运行（“学校”、“警察”页面成功打开， CSS悬停功能也在工作）
但是，如果我打开的浏览器窗口大小不是全屏，则链接根本不起作用，“学校”和“警察”页面不会打开， CSS悬停功能也不起作用。

链接文本类似于页面上的纯文本。*为什么？*

我猜页面上的其他内容位于链接文本上方。但是，如果看不到整个页面代码，就无法确定

尝试将

z-index

添加到您的

#我的链接

div中

--编辑--

抱歉，由于您已经使用了一系列不错的CSS属性，我想您应该听说过

z-index

替换

#my-link{
  margin-top: 5px;
  position: fixed;
  margin-left: 22%;
  width: 20%;
}

与

关于z-index的大量信息

--编辑--

为什么它有效

如果x是水平的，y是垂直的，就像在图表上一样，z是朝向或远离你的。使用

z-index

会给你带来一些东西。也可以重叠这些属性

以此为例,。将其复制到记事本（或类似文件）中，保存并查看代码以理解。在

样式

部分中更改每个div的z-index属性，以查看其工作原理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Z-Index Example</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
          div { width: 100px; height: 50px; border: 1px solid #000; }
          #one { position: absolute; z-index: 10; top: 10px; left: 10px; background: #666; }
          #two { position: absolute; z-index: 30; top: 30px; left: 30px; background: #999; }
          #three { position: absolute; z-index: 20; top: 50px; left: 50px; background: #CCC; }
        </style>
      </head>

      <body>
        <div id="one">Furthest away</div>
        <div id="two">Nearest</div>
        <div id="three">In the middle</div>

      </body>

    </html>


Z指数示例
div{宽度：100px；高度：50px；边框：1px实心#000；}
#一{位置：绝对；z指数：10；顶部：10px；左侧：10px；背景：#666；}
#两个{位置：绝对；z索引：30；顶部：30px；左侧：30px；背景：#999；}
#三{位置：绝对；z指数：20；顶部：50px；左侧：50px；背景：#CCC；}
最远的
最近的
在中间

当然，在HTML中，代码后面的元素将覆盖前面出现的内容。使用定位来移动东西会影响它们在页面自然流动中的位置，并且可能会重叠。当我在CSS中看到你的

fixed

属性时，我就是这样猜测你的问题的，因为你把

div

从自然流中去掉了。

我猜这可能与定位有关，但那只是一个猜测。不，它们就像我提到的纯文本一样。当浏览器窗口未处于全屏模式时，完全不工作。（firefox浏览器）是否安装了类似的扩展？这是否只影响这些链接而不影响页面上的其他内容？我不明白。什么是z索引，如何将其添加到#我的链接？你能说得更具体一点吗？@Scott，谢谢。现在可以了。你能给我解释一下问题的原因以及为什么z-index有帮助吗？@Mellon我给你举了一个详细但简单的例子。

#my-link{
  margin-top: 5px;
  position: fixed;
  z-index: 100;
  margin-left: 22%;
  width: 20%;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Z-Index Example</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
          div { width: 100px; height: 50px; border: 1px solid #000; }
          #one { position: absolute; z-index: 10; top: 10px; left: 10px; background: #666; }
          #two { position: absolute; z-index: 30; top: 30px; left: 30px; background: #999; }
          #three { position: absolute; z-index: 20; top: 50px; left: 50px; background: #CCC; }
        </style>
      </head>

      <body>
        <div id="one">Furthest away</div>
        <div id="two">Nearest</div>
        <div id="three">In the middle</div>

      </body>

    </html>