html - 固定菜单在其下重叠 div

Question

我有一个固定的菜单，在它之后我有一个具有固定背景图像的 div。问题是菜单与第二张图片重叠(因此 100 像素的图片位于菜单下方)。

Example Link: http://codepen.io/gorez16rus/pen/GZjgNB

图片链接:http://www.mygracefalls.com/wp-content/uploads/2014/03/upcoming-events_std_t-e1374861489324.jpg

菜单:

.home-wrap header{
  width: 100%;
  height: 100px;
  background-color: white;
  position: fixed;
  z-index: 10;
}

分区:

.event-box{
  width: 100%;
  height: 520px;
  padding: 0;
  background-image: url('http://www.mygracefalls.com/wp-content/uploads/2014/03/upcoming-events_std_t-e1374861489324.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  background-attachment: fixed;
  overflow: hidden;
  z-index: 3;
  position: relative;
}

Answer 1

解决此问题的最简单方法是更改​​图像的背景位置:

background-position: center 100px;

Modified version of your code on Codepen