Question

我的粘贴标题覆盖垂直滚动条，有没有办法解决这个问题？

网址：http://jlwebdesigns.co.uk/

标题代码（使用HTML5标记）

header {
    background: none repeat scroll 0 0 #283744;
    border-bottom: 4px solid #4F5B66;
    height: 97px;
    margin-top: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

Answer 1

解决方案不是很整洁但是给margin-top: 97px;下面的div ......基于 ruddy's 小提琴：

here is a demo

Answer 2

是的，要使该元素具有更高的z-index，并确保设置一个定位，例如相对或不属于该元素。

header {
    background: none repeat scroll 0 0 #283744;
    border-bottom: 4px solid #4F5B66;
    height: 97px;
    margin-top: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

基础元素

#underlyingelementwithscrolls{
position:relative;
z-index:1000;/*higher than 999 since header has it*/
}

在你的情况下，你已经覆盖了主体滚动条这样做，它应该得到修复

body{
overflow:hidden;}
html{
overflow-y:scroll;}

Answer 3

在查看您的页面后，您可以更改一些内容......

你的横幅是100％，但它也有一个填充，使你的横幅100％。你试图通过将溢出隐藏在html，body中来避免这种情况，但这会使你的标题与滚动条重叠。

解决方案：

html, body {
width:100%; 
overflow:hidden;  //remove this
}

#homeBanner {
width: 100%;
background: url(../img/bannerHolder.jpg) center no-repeat #558582;
text-align: center;
margin-top: 100px;
padding: 13% 2%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

Answer 4

我查看了该网站，并提出了一个简单的解决方法：

margin-top: 97px; // if header has some padding so count that too.

将该边距放在CSS中的section上。这将修复滚动条但会破坏徽标。由于新的保证金，你将不得不更换一些东西。

以下是使用margin-top的演示。您可以在标题下看到该文本。取下边距，它将隐藏在标题后面。

DEMO

注意：刚看到有超过1个部分。你可以将它们全部包装在一个div中并给它margin。或者使用:first-of-type。

粘滞的标题覆盖垂直滚动条

4 个答案: