Html 将一个分区居中放置在另外两个分区之上

我希望实现这种情况：

该页面共包含4个div。主层分为3个部分。 在DIV1和DIV2之上，另一个div（div4）必须在这2个div的中间浮在上面。

当前代码：

body {
position:relative;
}

div1 {
 // nothing
}

div2 {
 // nothing
}

div3 {
 // nothing
}

div4 {
 z-index: 10;
 position: absolute;
 top: 550px;
 left: 0;
 margin-left: auto;
 margin-right: auto;
 width: 50%;
 padding: 50px;
}

如果有人能给我一个提示，我将不胜感激

---

提前谢谢

如果您的问题只是如何获得该布局，这将有助于：

*{
保证金：0
}
html，
身体{
身高：100%；
}
div{
身高：33.3%；
}
.一{
背景：红色；
}
.二{
背景：绿色；
}
.三{
背景：蓝色；
}
.4{
位置：绝对位置；
背景：黄色；
最高：17%；
左：30%；
宽度：40%；
}

但您想让内容适合第4版吗？这是不可能的，你可以把div4放在div1里面，然后在div 4d上试试边距底部，你的意思是你想要div4的一半在div1上面，另一半在div2上面？独立于所有元素的高度，div 1,2和3在层1上，div 4在层2上，但漂浮在div1之上，并且在divdiv4的中间包含2。form@Mr.Goose如果您在问题和html代码中包含更多详细信息，效果会更好。。。。这个答案为你发布的img提供了解决方案，所以如果你能更具体一些，只需要整理一下，也许会更好。谢谢Danko！打印屏幕看起来不错@Goose先生很高兴能帮你一点忙：P