Question

我的网站上有一个固定位置的顶级菜单栏。当我把它切换到固定时（它通常在之前放置）我发现了一个问题 - 隐藏在下面的div隐藏在顶部菜单栏下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="styles/default.css" />
    <title>Title Goes Here</title>
</head>
<body>
    <div id="top">
        <img src="logo.png" id="logo" href="index.html" />
        <a class="menu">HOME</a>
        <a class="menu">FAQ</a>
        <a class="menu">TESTIMONIALS</a>
        <a class="menu">CONTACT</a>
        <a class="menu"><img src="login.png" /></a>
    </div>
    <div id="countdown">
        <p id="countdown_title1">Run a customizable, web based</p>
        <p id="countdown_title2">Purim Project Fundraiser</p>
        <p id="countdown_title3"><a>COUNTING DOWN TO PURIM:</a>Mar 16 2015</p>
    </div>

</body>
</html>

default.css

body{
    background-color: #ffffff;
    margin: 0;
}
p{
    margin: 0;
    padding: 0;
}
#top{
    padding-top: 27.5px;
    padding-bottom: 23px;
    padding-left: 328.1px;
    background-color: #ffffff;
    width: 100%;
    position:fixed;
}
#countdown{
    background-image: url("../index_contdown.png");
    width: 100%;
    height: 519px;
    padding-top: 88px;
    font-family: "Raleway";
    color: #ffffff;
}
#countdown_title1{
    font-size: 27px;
    font-weight: 300;
    padding-left: 555px;
    padding-top: 70.5px;
    margin-bottom: 20px;
}
#countdown_title2{
    font-size: 48px;
    font-weight: 600;
    padding-left: 472.5px;
}
#countdown_title3{
    font-size: 17px;
    font-weight: 600;
}
#countdown_title3 a{
    font-size: 17px;
    font-weight: 600;
    color: #2e7db6;
    padding-right: 17px;
}
#logo{
    margin-right:263.5px;
    vertical-align: middle;
}

.menu{
    padding-right:37.5px;
    padding-bottom:100px;
    font-size: 13px;
    font-weight: 600;
    font-family: "Raleway"; /* need to fix this with src so that also user without that font will be able to see it. */
}
.menu img{
    vertical-align: middle;
}

Answer 1

你必须将固定标题隐藏的div向下推一个等于固定标题高度的边距。

这是因为当您将某个元素标记为fixed时，它会停止按下它下面的div。因此，您必须手动将带有边距的div下推到等于标题高度的数量。

修改

使用padding-top而不是margin-top下推内容，以避免在另一个top: 0;上使用div

修复了顶级菜单问题

1 个答案: