Html 干扰链路的DIV层_Html_Css

Html 干扰链路的DIV层

html css

Html 干扰链路的DIV层,html,css,Html,Css,我有一些代码如下，我认为我的分层导致渲染链接不可链接。这个例子中的一些我已经从外部CSS类转换为样式，以便将其作为一个小用例编写。目前正在现代浏览器（最新的稳定FF和Chrome）上进行测试这一切看起来都很好（应用了许多其他纯粹的颜色/字体大小样式），但foobar.html是不可点击的我很确定我在分层方面做了一些错误的事情，但我认为使用z-index会解决我的问题。工作正常，如果问题出在IE8上，请使用z-index:1；众所周知，IE8在z索引的这个特殊问题上存在缺陷更新您更改了问题，

我有一些代码如下，我认为我的分层导致渲染链接不可链接。这个例子中的一些我已经从外部CSS类转换为样式，以便将其作为一个小用例编写。目前正在现代浏览器（最新的稳定FF和Chrome）上进行测试

这一切看起来都很好（应用了许多其他纯粹的颜色/字体大小样式），但foobar.html是不可点击的

我很确定我在分层方面做了一些错误的事情，但我认为使用z-index会解决我的问题。

工作正常，如果问题出在IE8上，请使用z-index:1；众所周知，IE8在z索引的这个特殊问题上存在缺陷

更新您更改了问题，以下是您更新问题的解决方法。我将容器的z-index改为O，-1使其位于主体下方，这就是为什么您的链接无法单击，现在可以了。

工作正常，如果问题出在IE8上，请使用z-index:1；众所周知，IE8在z索引的这个特殊问题上存在缺陷

更新您更改了问题，以下是您更新问题的解决方法。我将容器的z-index改为O，-1使其位于主体下方，这就是为什么您的链接无法单击，现在可以了。

您是否尝试过

z-index

如果

而不是

？感谢您的快速响应，是的，我尝试过了，不走运，我很害怕，我想你在页面顶层还有其他东西。你有没有尝试过

z-index

而不是

？谢谢你的快速响应，是的，我试过了，不走运，我害怕你在页面顶层有其他东西。你完全正确，我不好意思说我没有检查那个简化的代码。我现在已经编辑了Q并发送了真实交易：-）@MartijInverburg更新了答案。非常感谢！完全没有想到：-）你完全正确，我不好意思说我没有检查简化的代码。我现在已经编辑了Q并发送了真实交易：-）@MartijInverburg更新了答案。非常感谢！完全没有想到：-）

<body>

<!-- whole container needs to be at z-index of -1 -->
<div id="container">

    <div class="corner" id="backgroundTopLeft"></div>
    <div class="corner" id="backgroundTopRight"></div>
    <div class="corner" id="backgroundBottomLeft"></div>
    <div class="corner" id="backgroundBottomRight"></div>

    <!-- whole container needs to be at z-index of 1 -->
    <div id="container2">

        <div id="headerSection"><img src="images/jClarity_logo.png" alt="logo" /></div>

        <div id="navigationSection">
            <a class="selected" href="#">Introduction</a><span class="menuDivider">|</span><a href="about.html">About</a>
        </div>

    </div>

</div> 
</body>

@charset "utf-8";

/* Default margin, padding and font-family */
*
{
    font-family: Arial;
    margin: 0px;
    padding: 0px;
}

/* All images should have no borders by default */
img
{
    border: none;
}

/* Global styling for links, uses black as the color */
a
{
    color: #000000;
    text-decoration: none;
}

a.selected
{
    font-weight: bold;
}

a:hover
{
    color:#FF00FF;
}

#container
{
    position: relative;
    z-index: -1;
    height: 100%;
}

.corner
{
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: #172944;
    z-index: -1;
}

#backgroundTopLeft
{
    top: 0px;
    left: 0px;
}

#backgroundTopRight
{
    top: 0px;
    right: 0px;
}

#backgroundBottomLeft
{
    bottom: 0px;
    left: 0px;
}

#backgroundBottomRight
{
    bottom: 0px;
    right: 0px;    
}

#container2
{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.8;
    filter:alpha(opacity=80);
    background-image:url('../images/groovepaper.png');
}

/* The headerSection div, designed to fit in a centered logo */
#headerSection
{
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 70px;
    padding-top: 54px;    
    height: 70px;
    width: 250px;
}

/* The navigationSection div, designed to fit in the menu */
#navigationSection
{
    padding-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    text-align: right;
}

.menuDivider
{
    color: #666666;
    padding-left: 5px;
    padding-right: 5px;
}