html - CSS - 固定位置标题和页面边框组合

Question

我的要求是一个具有固定位置标题和页面周围完整边框的页面。

设置很简单，但固定位置标题与页面边框重叠时出现问题。

从视觉上看，这显示了问题:

您可以看到固定位置标题与右侧边框重叠。我的目标是防止这种情况发生。

我相信这是相关的代码块 - 通过将位置设置为相对来测试它，例如，将停止标题与右边框重叠，但我需要固定标题。

.site-header {
  min-height: 100px;
  background: blue;
  position: fixed;
  width: 100%;
  z-index: 10;
}

这里用笔来完整地演示这个问题:

http://codepen.io/juxprose/pen/vERQQr

有什么想法吗？我已经尝试了一些 z-index 实验，因为这似乎是问题所在，但没有成功。 100% 宽度似乎也与此问题有关。非常感谢任何指点，谢谢。

Answer 1

尝试将您的 css 更改为:

.site-header {
  min-height: 100px;
  background: blue;
  position: fixed;
  width: 100%;
  z-index: -1;
}

.site-main {
  position: relative;
  margin: 100px 25px;
  z-index:-2;
}

它在 CodePen 上工作 - 希望它也适合你。

http://codepen.io/juxprose/pen/vERQQr