Html 在容器中包含固定元素

具有顶部、左侧、中部和右侧的柔性布局。 中间部分分为主体和脚

在main中，我希望有固定的元素，有点像MDI，还有静态元素

如果滚动一次，固定元素应保持在相同的视图位置。但是，如果它移动到main元素的上方或左侧，则应将其包含在main元素中。如：不重叠顶部、左侧、右侧等

这个：

添加颜色和边距以使布局具有可视性

不是这个：

下面是一个简化的示例，其中包含一个容器

如果选择子“窗口”的固定位置，它在滚动时保持不变，但如果移动到外部，它与父窗口重叠

我可以使用绝对和重新定位它的滚动使用JavaScript，但不知道是否有一个纯粹的CSS/布局的方式来获得相同的结果

功能集\样式\位置（e）{
moveable.style.position=e.target.value；
}
函数暂停（e）{
e、 预防默认值（）；
e、 停止传播（）；
}
常数阻力={
el:空，
例:0,，
ey:0，
xs:0,，
ys:0,，
移动：功能（e）{
暂停（e）；
drag.el.style.marginLeft=（e.clientX-drag.sx+drag.ex）+“px”；
drag.el.style.marginTop=（e.clientY-drag.sy+drag.ey）+“px”；
},
完:职能(e){
暂停（e）；
window.removeEventListener（'mouseup'，drag.end）；
window.removeEventListener（'mousemove'，drag.move）；
},
开始：功能（e）{
让cs；
暂停（e）；
window.addEventListener（'mouseup'，drag.end）；
window.addEventListener（'mousemove'，drag.move）；
drag.el=e.target；
cs=getComputedStyle（drag.el）；
drag.ex=parseInt（cs.getPropertyValue（'margin-left'））| | 0；
drag.ey=parseInt（cs.getPropertyValue（'margin-top'））| | 0；
drag.sx=e.clientX；
drag.sy=e.clientY；
},
检查：功能（e）{
设t=e.target；
如果（t.dataset.moveable==“1”）
拖动。开始（e）；
}
};
document.addEventListener（'mousedown'，drag.check）；
文件。添加的列表器（“更改”，设置样式位置）；
lines.textContent=“滚动我\n”。重复（100）
*{
框大小：边框框；
}
身体{
保证金：0；
高度：100vh；
显示器：flex；
弯曲方向：立柱；
颜色：#444；
字体：14px无衬线；
}
标签{
光标：指针；
}
.外部{
显示器：flex；
填充：20px；
背景：一枝黄花；
柔性生长：1；
溢出：隐藏；
}
.内部{
位置：相对位置；
溢出：滚动；
背景：灰色；
柔性生长：1；
}
.盒子{
位置：绝对位置；
宽度：140px；
高度：150像素；
背景：银；
盒子阴影：0.3px红色；
光标：移动；
左边距：90像素；
页边顶部：-5px；
填充：20px；
}
.包厢部{
字号：700；
指针事件：无；
文本对齐：居中；
}

移动我

绝对值

固定的
只需使用
z-index

示例：


功能集\样式\位置（e）{
moveable.style.position=e.target.value；
}
函数暂停（e）{
e、 预防默认值（）；
e、 停止传播（）；
}
常数阻力={
el:空，
例:0,，
ey:0，
xs:0,，
ys:0,，
移动：功能（e）{
暂停（e）；
drag.el.style.marginLeft=（e.clientX-drag.sx+drag.ex）+“px”；
drag.el.style.marginTop=（e.clientY-drag.sy+drag.ey）+“px”；
},
完:职能(e){
暂停（e）；
window.removeEventListener（'mouseup'，drag.end）；
window.removeEventListener（'mousemove'，drag.move）；
},
开始：功能（e）{
让cs；
暂停（e）；
window.addEventListener（'mouseup'，drag.end）；
window.addEventListener（'mousemove'，drag.move）；
drag.el=e.target；
cs=getComputedStyle（drag.el）；
drag.ex=parseInt（cs.getPropertyValue（'margin-left'））| | 0；
drag.ey=parseInt（cs.getPropertyValue（'margin-top'））| | 0；
drag.sx=e.clientX；
drag.sy=e.clientY；
},
检查：功能（e）{
设t=e.target；
如果（t.dataset.moveable==“1”）
拖动。开始（e）；
}
};
document.addEventListener（'mousedown'，drag.check）；
文件。添加的列表器（“更改”，设置样式位置）；
lines.textContent=“滚动我\n”。重复（100）
*{
框大小：边框框；
}
身体{
保证金：0；
高度：100vh；
显示器：flex；
弯曲方向：立柱；
颜色：#444；
字体：14px无衬线；
}
标签{
光标：指针；
}
.外部{
显示器：flex；
填充：20px；
背景：一枝黄花；
/*flex grow:1；禁用以控制呈现的高度*/
高度：200px！重要；
溢出：隐藏；/*隐藏滚动行*/
}
.内部{
位置：相对位置；
溢出：滚动；
背景：灰色；
柔性生长：1；
}
.盒子{
位置：绝对位置；
宽度：140px；
高度：150像素；
背景：银；
盒子阴影：0.3px红色；
光标：移动；
左边距：90像素；
页边顶部：-5px；
填充：20px；
}
.包厢部{
字号：700；
指针事件：无；
文本对齐：居中；
}
.防止{
宽度：200px；
高度：200px；
显示器：flex；
背景颜色：蓝色；
颜色：白色；
证明内容：中心；
对齐项目：居中；
字体大小：粗体；
/*--解决方案--*/
z指数：1；
}

移动我

绝对值

固定的
防止重叠
使用粘性容器，让孩子们保持绝对的自由

在发布之前，我已经用
z-index
进行了全面测试，但没有找到任何令人满意的解决方案

我还尝试了使用
position:sticky
的各种方法，在那里我终于找到了解决方案：）

可以将子窗口包裹在位于主容器左上方的粘性容器中

优点：


简单的
相当干净的HTML结构
窗口位于容器的滚动条下方
相对于内容包装器的定位

缺点：


如果要使其非固定/非粘性，必须将元素移动到父元素，反之亦然
<div class="outer">
    <div class="main">
        <div class="wrap-sticky">
            <div class="sub-window">
                Fixed Window
            </div>
        </div>
        Other "normal" content
    </div>
</div>