Html 将div放置在相对于文档的顶部屏幕上

我有一个结构，我不能改变几个元素。 意思是模态位于顶部，而不改变div的位置（或至少不在box3上方）

我可以更改的元素有box3、box4和modal

我希望黄色的方块覆盖整个文档，现在它卡在其父文档中（请参见代码片段或） 有没有办法做到这一点

CSS和HTML：

.modal{
位置：绝对位置；
排名：0；
左：0；
高度：40px；
宽度：40px；
背景颜色：黄色；
}
.box4{
显示：块；
高度：150像素；
}
.box3{
显示：块；
位置：相对位置；
保证金：0自动；
右边填充：18px；
左侧填充：18px；
明确：两者皆有；
边框：2件纯色紫色；
高度：150像素；
}
.box2{
边框：2倍纯绿；
右边填充：10px；
左侧填充：10px；
宽度：100%；
位置：相对位置；
浮动：左；
显示：块；
框大小：边框框；
最小高度：200px；
}
上排{
显示：块；
框大小：边框框；
高度：20px；
}
.box1{
位置：相对位置；
宽度：100%；
身高：100%；
背景：#fff；
-webkit变换样式：保留-3d；
z指数：2；
边框：2件纯黑；
}
标题{
位置：相对位置；
背景色：红色；
高度：50px；
显示：块；
框大小：边框框；
}
页脚{
高度：50px；
填充顶部：8px；
边缘顶部：8px；
浮动：左；
宽度：100%；
背景颜色：蓝色；
显示：块；
}

---

这是因为父母有

位置：相对

或

-webkit变换样式：preserve-3d。如果你把它去掉，就好了


.modal{
位置：绝对位置；
排名：0；
左：0；
高度：40px；
宽度：40px；
背景颜色：黄色；
}
.box4{
显示：块；
高度：150像素；
}
.box3{
显示：块；
保证金：0自动；
右边填充：18px；
左侧填充：18px；
明确：两者皆有；
边框：2件纯色紫色；
高度：150像素；
}
.box2{
边框：2倍纯绿；
右边填充：10px；
左侧填充：10px；
宽度：100%；
浮动：左；
显示：块；
框大小：边框框；
最小高度：200px；
}
上排{
显示：块；
框大小：边框框；
高度：20px；
}
.box1{
宽度：100%；
身高：100%；
背景：#fff；
z指数：2；
边框：2件纯黑；
}
标题{
位置：相对位置；
背景色：红色；
高度：50px；
显示：块；
框大小：边框框；
}
页脚{
高度：50px；
填充顶部：8px；
边缘顶部：8px；
浮动：左；
宽度：100%；
背景颜色：蓝色；
显示：块；
}

您能发布CSS或演示吗，请稍候cssI不理解您的问题，请澄清