jquery - 在固定位置 div 中扩展文本

Question

我目前在使用 JQuery 展开和折叠部分时遇到问题；固定位置 div 不允许我更改在某些浏览器中查看的内容。

以前当我没有 mainBlock 和 titleBlock div 时它似乎工作正常，如果我删除固定位置线问题就会消失，但是我的 div 没有按我希望的方式布置是。

正如我之前所说，这只是某些浏览器中的问题:它似乎在 Firefox 中运行良好，但在 Chrome 或 IE 中却不行。我不确定我需要为每个浏览器更改什么才能使其正常工作(在 JSfiddle 中似乎也能正常工作)

JavaScript:

jQuery(document).ready(function () {

    $(".collapse").click(function () {
        $(this).next().toggle();
        $(this).find('span').toggleClass("ui-icon-triangle-1-s");
    }).next().hide();

});

CSS:

.collapse span {
    display:inline-block;
    }
#titleBlock {
    position: fixed;
    right: 10px;
    left: 10px;
    top:10px;
    height: 90px;
    z-index: 0;
}
#mainBlock {
    position: fixed;
    right: 10px;
    left: 10px;
    top:110px;
    bottom: 10px;
    overflow-y: scroll;
    z-index: -1;
}

HTML:

<div id="titleBlock">
    <h1>Title</h1>
    <h2>Author <span style="float:right;">DD/MM/YYYY</span></h2>
</div>

<div id="mainBlock">

<h2 id="S1">Section 1</h2>
<p>Non-hidden text</p>

<h2 id="S1_1" class="collapse"><span class="ui-icon ui-icon-triangle-1-e"></span>Section 1.1</h2>
<p>Hidden Text </p>

</div>

Answer 1

似乎是 z-index 导致了问题。

#titleBlock {
    position: fixed;
    right: 10px;
    left: 10px;
    top:10px;
    height: 90px;
    z-index: 0;
}
#mainBlock {
    position: fixed;
    right: 10px;
    left: 10px;
    top:110px;
    bottom: 10px;
    overflow-y: scroll;
    z-index: 1;
}

因为 mainBlock 是背景，所以我无法点击它。