SyntaxHighlighter和固定元素的溢出问题

Question

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

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

这是它的样子：

这是一个非常简化的示例on JSFiddle

似乎主要罪魁祸首是shCore.css。当我删除它时，溢出消失。不幸的是，它的删除也会导致行号与相应的代码行不同步。

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

我知道封​​闭的样式表非常庞大，搜索它们是一个繁琐的工作，但是我无法让它变得更简单。我一直在研究这个愚蠢的问题几个小时，所以我决定在这里问一个问题。

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

我也很高兴收到任何评论建议哪些CSS属性可能会导致此类行为。也许我的overflow猜测已经过时了。

或许改变语法着色库会是一个很好的解决方案吗？

Answer 1

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

我必须做的是在我的固定元素中添加z-index属性，以便有效地将其移动到前台。

这是working example on JSFiddle