Razor Pages中动态设置元素margin-top解决绝对定位遮挡问题

你遇到的问题是第一个区块用position: absolute脱离文档流后，第二个区块被其覆盖，想要动态设置第二个区块的margin-top等于第一个区块的高度，这里提供两种可行方案：

方案一：CSS替代绝对定位（推荐） #

如果核心需求是全屏宽度且不脱离文档流，完全不需要用position: absolute，可以通过以下CSS实现相同的全屏居中效果，同时让第二个区块自动排在下方：

修改.sit-contact-section的样式：

.sit-contact-section {
    width: 100vw;
    background-color: var(--color-second);
    margin-left: calc(-50vw + 50%); /* 实现全屏宽度且保持内容居中 */
}

这种方式不会让区块脱离文档流，后续元素会自动识别它的高度并排列，无需额外调整margin-top，布局更稳定，也不用依赖JS。

方案二：JS动态计算高度（保留绝对定位时使用） #

如果必须保留position: absolute，可以通过JS获取第一个区块的实际高度，再设置第二个区块的margin-top：

步骤1：给第二个容器添加类名 #

给第二个外层div添加一个可识别的类，方便JS获取：

<div class="sit-contact-second-container">
    <div class="sit-contact-info"></div>
    <div class="sit-contact-form">
        <form method="post">...</form>
    </div>
</div>

步骤2：添加JS计算代码 #

将以下代码放在页面底部（或DOMContentLoaded事件中）：

document.addEventListener('DOMContentLoaded', function() {
    const firstSection = document.querySelector('.sit-contact-section');
    const secondContainer = document.querySelector('.sit-contact-second-container');
    
    if (firstSection && secondContainer) {
        // 获取第一个区块的总高度（包含内边距、边框，以及绝对定位的箭头高度）
        const totalHeight = firstSection.offsetHeight + 22.5; // 22.5是箭头的高度
        secondContainer.style.marginTop = `${totalHeight}px`;
    }
});

如果需要适配窗口大小变化，还要添加resize事件监听，重新计算高度：

window.addEventListener('resize', function() {
    if (firstSection && secondContainer) {
        const totalHeight = firstSection.offsetHeight + 22.5;
        secondContainer.style.marginTop = `${totalHeight}px`;
    }
});

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