如何让前置浮动Div展开时保持原有位置？

问题描述 #

现有布局中，位于A前方的B（Div元素）在展开宽度至100%时，会偏移至A的下方丢失原有位置。已尝试CSS Grid（含grid-area、grid-column、order）、Flexbox、结合float的Grid布局，以及JavaScript的insertBefore方法，但insertBefore会导致移动端Chrome自动滚动。寻求纯CSS或不使用insertBefore的JavaScript方案（如toggle），实现B展开时保持原有位置。

现有代码 #

CSS 代码 #

.frame {
    width: 48%;
    height: 400px;
    font: bold 41px roboto;
    color: yellow;
    border: solid 2px black;
    background-color: purple;
    float: left;
}
    
input:checked + .frame {
    width: 100%;
    background-color: brown;
}

input{
    display: none;
}

HTML 代码 #

<div class="gallery">
    <input type="checkbox" id="a">
    <label for="a" class="frame a">A</label>
    <input type="checkbox" id="b">
    <label for="b" class="frame b">B</label>
    <input type="checkbox" id="c">
    <label for="c" class="frame a">A</label>
    <input type="checkbox" id="d">
    <label for="d" class="frame b">B</label>
    <input type="checkbox" id="e">
    <label for="e" class="frame a">A</label>
    <input type="checkbox" id="f">
    <label for="f" class="frame b">B</label>
</div>

解决方案 #

方案1：纯CSS 绝对定位实现 #

通过绝对定位固定B的位置，使其展开100%宽度时仍保留在原有行区域，不会偏移到A下方。

修改后的CSS代码：

.gallery {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.frame {
    width: 48%;
    height: 400px;
    font: bold 41px roboto;
    color: yellow;
    border: solid 2px black;
    background-color: purple;
    float: left;
    margin-bottom: 2%;
    position: relative;
    z-index: 1;
}

input:checked + .frame.b {
    width: 100%;
    background-color: brown;
    position: absolute;
    left: 0;
    z-index: 10;
}

/* 为每组B设置对应top值，匹配原有行位置 */
input#b:checked + .frame.b {
    top: 0;
}

input#d:checked + .frame.b {
    top: calc(400px + 2%);
}

input#f:checked + .frame.b {
    top: calc(2 * (400px + 2%));
}

input{
    display: none;
}

方案2：JavaScript 动态定位实现（无insertBefore） #

通过监听复选框状态，动态计算B的原有位置并设置绝对定位，适配任意数量的A/B组，无需硬编码位置值。

CSS 调整

.gallery {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.frame {
    width: 48%;
    height: 400px;
    font: bold 41px roboto;
    color: yellow;
    border: solid 2px black;
    background-color: purple;
    float: left;
    margin-bottom: 2%;
    position: relative;
    z-index: 1;
}

input:checked + .frame.b {
    background-color: brown;
}

input{
    display: none;
}

JavaScript 代码

document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const targetFrame = this.nextElementSibling;
        if (!targetFrame.classList.contains('b')) return; // 只处理B元素

        if (this.checked) {
            // 记录原有偏移位置，设置绝对定位
            const originalTop = targetFrame.offsetTop;
            targetFrame.style.position = 'absolute';
            targetFrame.style.top = `${originalTop}px`;
            targetFrame.style.width = '100%';
            targetFrame.style.zIndex = '10';
        } else {
            // 恢复原有样式
            targetFrame.style.position = '';
            targetFrame.style.top = '';
            targetFrame.style.width = '';
            targetFrame.style.zIndex = '';
        }
    });
});

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