为何设置display:flex的divA会被后置无定位divB覆盖显示？

为什么divB会显示在divA上方？ #

你给#login_or_signup（divA）设置了position: relative和top: 30%，这个写法的核心特性是：

• 元素会相对于自身原本的位置向下移动30%
• 但它在文档流中原本占据的空间不会被释放，页面仍会保留这个位置
• 所以divB会正常落在divA原本的位置上，视觉上就出现在了下移后的divA上方

解决办法（三种可选） #

方案1：用margin-top代替top（最简单）

去掉position: relative和top，改用margin-top调整divA的位置，这样元素下移的同时会把下方的divB一起推挤下去，不会出现错位：

#login_or_signup {
    display: flex;
    margin-top: 30vh; /* 用vh单位适配视口高度，比百分比更直观 */
}

#terms_conditions {
    text-align: center;
}

方案2：用父容器flex布局实现居中（推荐，符合现代布局逻辑）

如果你的需求是让divA垂直居中，直接给父容器（比如body）设置flex布局，既可以实现定位需求，又不会影响后续元素的正常排列：

body {
    margin: 0;
    min-height: 100vh; /* 让body占满整个视口高度 */
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
}

#login_or_signup {
    display: flex;
    /* 无需额外定位样式 */
}

#terms_conditions {
    text-align: center;
    margin-top: 2rem; /* 给divB加个和divA的间距 */
}

方案3：用绝对定位（需谨慎，适合特定场景）

如果一定要用定位实现，把divA改成position: absolute，同时给父容器（比如body）设置position: relative，这样divA会相对于父容器定位，且脱离文档流，不会占据原空间：

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
}

#login_or_signup {
    display: flex;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%); /* 让divA水平居中 */
}

#terms_conditions {
    text-align: center;
    position: absolute;
    bottom: 2rem; /* 可以把divB固定在底部 */
    width: 100%;
}

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