如何使#contact元素显示在页面主标题下方？已尝试align函数无效

看起来你遇到的核心问题是定位逻辑混乱导致#contact元素没有出现在主标题下方，我们一步步来解决：

问题分析 #

• 错误的CSS选择器：比如body.navbartext, html这种写法只会选中带有navbartext类的<body>，但你的<body>并没有加这个类，导致部分全局样式（比如margin、height）没有生效。
• 主标题的绝对定位导致父元素高度塌陷：你的<h1>和<h2#subtitle>都用了position:absolute，而它们的父元素<header>没有设置position:relative，也没有设置高度，所以<header>在文档流中高度为0，#contact自然会紧跟在导航栏后面，而不是主标题下方。
• #contact的CSS无效：你给#contact设置了top:0%但没有指定position属性，这个样式根本不会生效。

修复方案 #

我们可以重构布局逻辑，用更清晰的方式实现居中的主标题，同时让#contact自然出现在主标题下方：

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 全局样式修正：去掉错误的类选择器 */
        body, html{ 
            margin:0; 
            overflow-x:hidden; 
            font-family:helvetica; 
            min-height:100vh; /* 用min-height代替固定height，适配不同屏幕 */
        }
        ul.navbartext{ 
            list-style:none; 
            padding:5px; 
            display: block; 
            width:100%; 
            box-shadow: 1px 2px 40px #ccc; 
            margin:0; 
        }
        a.navbartext{ 
            text-decoration: none; 
            font-size:15px; 
            color: black; 
        }
        li.navbartext{ 
            display:inline-block; 
            margin: 10px; 
        }
        /* 主标题容器：用flex实现垂直水平居中，同时保留自身高度 */
        header {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: calc(100vh - 50px); /* 减去导航栏的高度，确保不被遮挡 */
            padding: 20px 0;
        }
        h1.mainpagetitle{ 
            font-size: 4em; 
            margin: 0 0 1rem 0; /* 给subtitle留出间距 */
            font-family: helvetica; 
        }
        #subtitle { 
            font-size: 2em; 
            margin: 0 0 2rem 0; /* 给contact留出间距 */
            font-family: Roboto; 
            text-align: center;
        }
        /* contact元素：自然出现在header下方，可自定义样式 */
        #contact {
            text-align: center;
            padding: 20px 0;
            background: #f5f5f5;
        }
    </style>
</head>
<body>
    <div>
        <ul class="navbartext">
            <li class="navbartext"><a class="navbartext" href="">Home</a></li>
            <li class="navbartext"><a class="navbartext" href="">Youtube</a></li>
            <li class="navbartext"><a class="navbartext" href="">Github</a></li>
            <li class="navbartext"><a class="navbartext" href="">Roblox</a></li>
            <li class="navbartext"><a class="navbartext" href="#contact">Contact</a></li>
        </ul>
    </div>
    <header>
        <h1 class="mainpagetitle">Web Dev, Game Dev</h1>
        <h2 id="subtitle">Subtitle</h2>
    </header>
    <div id="contact"><a href="contact">Contact Info</a></div>
</body>
</html>

关键修改点解释 #

• 修正全局样式选择器：把body.navbartext, html改成body, html，确保全局样式生效。
• 用Flexbox重构header布局：Flexbox是现代布局的首选方式，它可以轻松实现垂直水平居中，同时让header保留自身高度，这样#contact会自然流到header下方。
• 移除不必要的绝对定位：去掉了原来h1和subtitle的position:absolute和transform，用flex的居中属性替代，布局更稳定。
• 添加间距和内边距：给h1、subtitle和#contact设置margin/padding，让页面布局更美观，避免元素拥挤。
• 适配不同屏幕：用min-height:100vh代替固定的height:1080px，确保页面在不同设备上都能正常显示。

额外提示 #

如果你还是想用绝对定位的方式实现，也可以给<header>设置position:relative和固定高度，然后调整#contact的margin-top，但Flexbox的方式更简洁易维护，推荐使用。

内容的提问来源于stack exchange，提问作者CommandBlock