javascript - SyntaxHighlighter 和固定元素的溢出问题

Question

我正在开发的页面上有一个固定元素。它包含一个 Logo 和几个导航链接。

在上述网站上，我需要以各种语言展示代码片段。我正在使用 Alex Gorbatchev 的 SyntaxHighlighter 来为语法着色。问题是，带样式的代码流过我的固定元素。

这是它的样子:

这是一个非常简单的例子 on JSFiddle

看来罪魁祸首是shCore.css。当我删除它时，溢出消失了。不幸的是，删除它还会导致行号与其对应的代码行不同步。

我已经开始摆弄文件中的 CSS，以及我自己的样式表中的 CSS。我在 SyntaxHighlighter 生成的元素和我自己的元素上尝试了 overflow 和 float 值的各种组合，但似乎没有任何效果。

我知道随附的样式表非常庞大，要在其中搜索错误是一项乏味的工作，但我就是不能让它变得更简单。我已经在这个愚蠢的问题上工作了几个小时，所以我决定在这里问一个问题。

有好心无聊的人能帮帮我吗？以前有人遇到过 SyntaxHighlighter 的这种问题吗？如果您认为这个问题不够简洁，请不要投票删除它，因为我会在解决问题后自己发布答案。这似乎是任何人都容易遇到的事情。

我也很高兴收到任何评论建议哪些 CSS 属性会导致此类行为。也许我的overflow 猜测是错误的。

或者更改语法着色库可能是一个很好的解决方案？

Answer 1

一位拥有几年前端经验的同事帮助我解决了这个问题。我很难过看到它是多么简单。

我必须做的是向我的固定元素添加一个 z-index 属性，以有效地将它移动到前台。

这是一个 working example on JSFiddle