水平到 off-canvas nav with splash screen，绝对定位冲突

Question

我在上一个问题的同一个网站上工作（我是 CSS3 菜鸟）。我正在使用的网站有一个水平导航菜单，可以切换到关闭的 canvas 菜单。我用 jQuery 打开和关闭类，它看起来很不错。 html 被 div 分成两个 div，一个 #drawer 和一个 #site-canvas。简化后，html 看起来像这样

<body>
<nav id="drawer">
//ul menu stuff
</nav>
<div id="site-canvas">
   <header> // header for mobile version </header>
   <div class="splash">//Splash Screen<div>
   <div id="site-content">//Lorem Ipsum<div>
</div> <!--End #site-canvas-->
</body>

它将具有启动画面，其图像将占据 100% 的视口并保持居中。

/* Splash page */
.splash {
    background: url('//image') center center;
     background-size: cover;
     min-height: 100%;
 }

到目前为止一切顺利，但在桌面样式（1000px+ 宽度）中，我们现在与导航有冲突 div 在网站之外 canvas 导致它被单独修复滚动条（启动画面箭头现在也已修复，图像底部不在视口底部）。移动版没有这些问题。 http://codepen.io/StuffieStephie/pen/pJVKmv

我可以通过绝对定位解决上述问题，但随后我失去了自然的文档流并且页面上下文在屏幕上流动。

.splash {
    background: url('//someimage.jpg') center center;
     background-size: cover;
     min-height: 100%;
     width: 100%;
     text-align: center;
     position:absolute;
     top: 0;
     left: 0;
     z-index: 0;
}

http://codepen.io/StuffieStephie/pen/oXdMBy

关于如何解决这个问题有什么想法吗？我迷路了。

Answer 1

我想出了一个解决方案here。

为了解决箭头问题，我在 splash div 中添加了 position:relative; 来制作箭头，即 position:absolute; 将自身锚定到 div , 而不是浏览器 window.

为了解决 nav 问题，我将其定位更改为 fixed，然后从 body, html 中删除了 overflow:hidden;，从 [=18 中删除了 overflow-y: scroll; =] 标签。

这使得 nav 固定。我认为这是预期的目标，并通过删除包装元素的溢出样式属性允许文档的其余部分自然流动。

水平到 off-canvas nav with splash screen，绝对定位冲突

Horizontal to off-canvas nav with splash screen, absolute positioning conflicts

html

css

jquery

css-position

responsive-design