基于checkbox关联按钮实现内容滑出时绿色按钮位置错位问题

• 隐藏内容区块（.firstContent、.secondContent）仅通过负margin-top偏移位置，未限制高度，收起状态仍然占用文档流高度，后续绿色按钮的位置会向下偏移对应内容高度
• 红色按钮z-index设置为2高于绿色按钮的1，偏移后的绿色按钮自然被遮挡在红色按钮下方

核心思路是让内容区块收起时不占用文档流空间，仅在展开时撑开高度推动后续元素下移，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* {
    margin: 0;
    padding: 0;
    font-family: Open Sans;
    font-size: 16px;
    box-sizing: border-box;
}

.container {
    width: 500px;
    margin: 0 auto;
    background-color: grey;
}

#firstButtonCheck {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
}

#firstButtonCheck ~ .firstContent {
    margin-top: -100%;
    width: 500px;
    display: block;
    transition: margin-top 1s ease-out, max-height 1s ease-out;
    margin-left: auto;
    margin-right: auto;
    /* 新增：收起时高度为0，隐藏溢出内容，不占文档流 */
    max-height: 0;
    overflow: hidden;
}

.firstButton {
    display: block;
    height: 400px;
    width: 100%;
    background-color: red;
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

#firstButtonCheck:checked ~ .firstContent {
    margin-top: 0px;
    transition: margin-top 1s ease-out, max-height 1s ease-out;
    /* 新增：展开时设置足够大的最大高度，适配实际内容高度 */
    max-height: 1000px;
}

#secondButtonCheck {
    position: absolute;
    opacity: 0;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
}

#secondButtonCheck ~ .secondContent {
    margin-top: -100%;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    display: block;
    transition: margin-top 1s ease-out, max-height 1s ease-out;
    /* 新增：同第一个内容区块 */
    max-height: 0;
    overflow: hidden;
}

.secondButton {
    display: block;
    width: 500px;
    height: 500px;
    background-color: green;
    cursor: pointer;
    position: relative;
    z-index: 2; /* 调整z-index和红色按钮一致，避免被遮挡 */
    margin: 0 auto;
}

#secondButtonCheck:checked ~ .secondContent {
    margin-top: 0px;
    transition: margin-top 1s ease-out, max-height 1s ease-out;
    /* 新增：同第一个内容区块 */
    max-height: 1000px;
}
</style>
</head>
<body>
<div class="container">
<input type="checkbox" id="firstButtonCheck"/>
<label class="firstButton" for="firstButtonCheck"></label>
<div class="firstContent">
    <h1>923id92i3d93i</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>

<input type="checkbox" id="secondButtonCheck"/>
<label class="secondButton" for="secondButtonCheck"></label>
<div class="secondContent">
    <h1>dasdasda</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>

</body>
</html>

修改后收起状态下内容区块不占用页面高度，绿色按钮会紧贴红色按钮下方；点击红色按钮展开内容时，内容会自然向下撑开，将绿色按钮向下推送；收起红色按钮内容时，绿色按钮会自动回到初始位置，不会出现偏移遮挡问题。

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