Question

我正在上一个问题的同一个网站上工作（我是一个CSS3菜鸟）。我正在处理的网站有一个水平导航菜单，可切换到非画布菜单。我正在使用jQuery打开和关闭类，它看起来非常好。 html分为两个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在网站画布之外发生冲突导致它被单独的滚动条修复（现在也是启动画面箭头）也固定，图像的底部不在视口的底部）。移动版没有这些问题。 http://codepen.io/StuffieStephie/pen/pJVKmv Fixed problem

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

.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;
}

Absolute positioning problem http://codepen.io/StuffieStephie/pen/oXdMBy

有关如何解决此问题的任何想法？我迷路了。

Answer 1

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

要解决箭头问题，我已将Group.objects.filter( Q(member__isnull=True) | Q(member__isnull=False) & Q( Count(member__gender=True)=0 ) )添加到position:relative; div以制作箭头，splash将自己锚定到此div，而不是浏览器窗口。

要解决position:absolute;问题，我已将其定位更改为nav，然后从fixed移除overflow:hidden;并从body, html移除overflow-y: scroll;标签。

这使得#site-canvas得以修复。我认为这是预期的目标，并通过删除包装元素的溢出样式属性自然地允许文档的其余部分流动。

具有初始屏幕的水平到非画布导航，绝对定位冲突

1 个答案: