Question

我有一个网站，我试图通过使用

将菜单栏粘贴到标题的底部

#menu {
    position: absolute;
    bottom: 0;
}

然而，菜单栏粘在屏幕底部而不是父div的底部。

* {
    font-family: Arial, sans-serif;
    border: 0 solid black;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 500px; /*for testing*/
    background-color: #00FF00;
}

#header {
    height: 270px;
    border: 1px solid #FF0000;
}

#menu {
    display: block;
    height: 50px;
    padding: 16px;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    border: 1px solid #0000FF;
}

<!DOCTYPE html>
<html lang="nl">
<head>
</head>
<body>

    <div id="header">

        <div id="menu">
            <a href="/" id="home">Home</a>
            <a href="/evenementen.php" id="evenementen">Evenementen</a>
            <a href="/fotos.php" id="fotos">Foto's</a>
            <a href="/contact.php" id="contact">Contact</a>
            <a href="/inschrijvingen.php" id="inschrijvingen">Inschrijvingen</a>
            <a href="/partners.php" id="partners">Partners</a>
        </div>
    </div>

</body>
</html>

另请注意，如果您以全屏模式运行此代码段，则body似乎会将其高度更改为视口的高度，#menu也会移至视口的底部。

我从未遇到过这个问题，尽管我已经将position: absolute;用于此类工作......

有谁知道如何解决这个问题以及导致这种情况的原因是什么？提前谢谢！

Answer 1

标题上需要position: relative。没有它，它就不会像它是一个儿童元素。如果没有relative，它就会像body中的行为一样，而不是在父元素中：

＆＃13;

* {
    font-family: Arial, sans-serif;
    border: 0 solid black;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 500px; /*for testing*/
    background-color: #00FF00;
}

#header {
    height: 270px;
    border: 1px solid #FF0000;
    position: relative;
}

#menu {
    display: block;
    height: 50px;
    padding: 16px;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    border: 1px solid #0000FF;
}

＆＃13;

<!DOCTYPE html>
<html lang="nl">
<head>
</head>
<body>

    <div id="header">

        <div id="menu">
            <a href="/" id="home">Home</a>
            <a href="/evenementen.php" id="evenementen">Evenementen</a>
            <a href="/fotos.php" id="fotos">Foto's</a>
            <a href="/contact.php" id="contact">Contact</a>
            <a href="/inschrijvingen.php" id="inschrijvingen">Inschrijvingen</a>
            <a href="/partners.php" id="partners">Partners</a>
        </div>
    </div>

</body>
</html>

＆＃13;

Answer 2

不要忘记将position:relative放到绝对元素的父级，以便它相对于父级

* {
    font-family: Arial, sans-serif;
    border: 0 solid black;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 500px; /*for testing*/
    background-color: #00FF00;
}

#header {
    height: 270px;
    border: 1px solid red;
    position:relative;
}

#menu {
    display: block;
    height: 50px;
    padding: 16px;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    border: 1px solid #0000FF;
}

<!DOCTYPE html>
<html lang="nl">
<head>
</head>
<body>

    <div id="header">

        <div id="menu">
            <a href="/" id="home">Home</a>
            <a href="/evenementen.php" id="evenementen">Evenementen</a>
            <a href="/fotos.php" id="fotos">Foto's</a>
            <a href="/contact.php" id="contact">Contact</a>
            <a href="/inschrijvingen.php" id="inschrijvingen">Inschrijvingen</a>
            <a href="/partners.php" id="partners">Partners</a>
        </div>
    </div>

</body>
</html>

Answer 3

您必须在标题中设置position: relative

＆＃13;

* {
    font-family: Arial, sans-serif;
    border: 0 solid black;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 500px; /*for testing*/
    background-color: #00FF00;
}

#header {
    height: 270px;
    border: 1px solid #FF0000;
    position: relative;
}

#menu {
    display: block;
    height: 50px;
    padding: 16px;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    border: 1px solid #0000FF;
}

＆＃13;

<!DOCTYPE html>
<html lang="nl">
<head>
</head>
<body>

    <div id="header">

        <div id="menu">
            <a href="/" id="home">Home</a>
            <a href="/evenementen.php" id="evenementen">Evenementen</a>
            <a href="/fotos.php" id="fotos">Foto's</a>
            <a href="/contact.php" id="contact">Contact</a>
            <a href="/inschrijvingen.php" id="inschrijvingen">Inschrijvingen</a>
            <a href="/partners.php" id="partners">Partners</a>
        </div>
    </div>

</body>
</html>

＆＃13;

css`位置：绝对; bottom：0`将div移动到屏幕底部而不是父级

3 个答案: