Question

在我的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>

（当鼠标点击链接时，链接页面应该在新的浏览器窗口中打开。）

CSS ：

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

a.school{
  color: #6ffe11;
  font-size: small;
  text-decoration: none;

  position: relative;
  left: 30.5%;
  margin-top:10px;

}


a.police{
  color: #6ffe11;
  font-size: small;
  text-decoration: none;

  position: relative;
  left: 30.5%;

  margin-top:10px;
}

a.school:hover, a.police:hover
{
color: #2f8;
text-decoration: underline;
}

我在firefox 3.6.16上测试过，当我用全屏打开firefox浏览窗口时，链接工作成功（“学校”，“警察”页面成功打开， CSS悬停功能也有效。）

但是，如果我打开浏览器窗口大小不是全屏，则链接根本无法正常工作，“学校”并且“警察”页面未打开， CSS悬停功能也不起作用。 链接文本就像页面上的纯文本一样。 * 为什么??? *

Answer 1

我的猜测是页面上的其他内容位于其上方。但是，如果没有看到整个页面代码，就无法确定。

尝试在z-index div

中添加#my-link

- 编辑 -

抱歉，您已经使用了很好的CSS属性，我以为您会听说z-index。

替换

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

与

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

z-index https://developer.mozilla.org/en/Understanding_CSS_z-index

上的大量信息

- 编辑 -

为什么会有效

如果x是水平的并且y是垂直的，如图表所示，z朝向或远离您。使用z-index将为您带来一些东西。您也可以重叠这些属性。

以此为例。将其复制到记事本（或类似）中，保存并查看要理解的代码。更改style部分中每个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>

当然，在HTML中，代码中稍后的元素将覆盖先前出现的内容。使用定位来移动东西会影响它们在页面的自然流动中的位置，并且可能会重叠。当我在你的CSS中看到你的fixed属性时，我就会猜测你的问题，因为你已经从自然流中取出了div。

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

1 个答案: