CSS - 固定位置标题＆amp;页面边框组合

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

Answer 2

请添加左右10px然后它将解决

Answer 3

将width: 100%替换为right: 10px和left: 10px

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

示例：http://codepen.io/anon/pen/yyKGyJ

---

结果