Question

我想知道是否有人可以帮我解决我的网页顶部问题。

我尝试过使用position：fixed属性，但这会阻碍所有内容，因为我的内容与固定的div重叠。

我的网站在这里：

www.crookedcartoon.co.uk/print.html

我希望导航栏上方的所有内容，包含的导航栏保持粘贴到页面顶部，并在其下滚动内容。

我意识到这可能意味着我必须将我的大多数图像更改为jpg而不是png。但是，我想知道是否还有这个？在创建内容滚动的假线时，然后消失，而不是到达页面的顶部，您将通过PNG图像的透明部分看到它。我真的不想使用iframe，除非这是唯一的方法。

谢谢！

Answer 1

iframe肯定不是正确的选择。在你想要的东西上放一个div，把position: fixed放在它上面并将它放在左上角。

<div class="ontop">
    <div id="top"></div>
    <div id="logo"></div>
    <div id="contact"></div>
    <div id="navbar"></div>
</div>

之后，在margin-top上添加一些等于#content-holder高度的.ontop。这是必要的，因为它是从文档流程中取出的（因为position: fixed），内容将在其下面。

如果您还将background-color: white添加到.ontop，您的透明度问题就会消失。

尝试复制您的设置，此处为working demo。

Answer 2

你可以试试这个

请更新下面的css，因为我通过使底部的部分透明，使顶部背景变白来更新图像。 [1 - 下载图像并检查它]

#ontop {
    background: inherit;
    height: auto;
    margin-top: -10px;
    position: fixed;
    z-index: 10;
}
#contact {
    background: none repeat scroll 0 0 white;
    height: 45px;
    margin-bottom: 1px;
    margin-left: -5px;
    margin-top: -8px;
    position: relative;
    vertical-align: top;
    width: 1127px;
}
#logo {
    height: 62px;
    margin-left: -10px;
    position: relative;
    width: 1127px;
    z-index: 1111;
}

] 1

如何将我的导航栏修复到页面顶部

2 个答案: