Html CSS文本元素破坏div定位

我正在处理这个网页，在添加文本之前，我把它分成了几个部分

但当我在其中一个div中放入一些文本时，所有div的位置都会塌陷

我已经编写了简单的代码来说明这个问题

html{
身高：100%；
}
身体{
身高：100%；
}
#包装纸{
身高：100%；
}
.盒子{
显示：内联块；
位置：相对位置；
背景：黑色；
}
#方框-1{
最高：5%；
左：5%；
身高：35%；
宽度：35%；
}
#方框-2{
最高：5%；
左：10%；
身高：35%；
宽度：50%；
}
#方框-3{
排名前10%；
左：5%；
身高：50%；
宽度：35%；
}
#方框-4{
排名前10%；
左：10%；
身高：50%；
宽度：50%；
}

问题

放置

垂直对齐：顶部

到

.box

默认情况下，它有

垂直对齐：基线

.box {
    display: inline-block;
    vertical-align: top;
    position: relative;
    background: black;
}

伊斯梅尔·法鲁克回答的备选方案

.box {
    display: block;
    position: relative;
    background: black;
    float: left;
}

我使用的是
flexbox
链接



html{
身高：100%；
}
身体{
身高：100%；
}
#包装纸{
高度：100vh；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.盒子{
显示器：flex；
背景：黑色；
利润率：0.5%；
}
#方框-1{
身高：50%；
宽度：49%；
}
#方框-2{
身高：50%；
宽度：49%；
}
#方框-3{
身高：50%；
宽度：49%；
}
#方框-4{
身高：50%；
宽度：49%；
}
p{
颜色：白色；
}
嗨

为什么给每个div
位置和左上角
这是没有位置的工作。@lalitbhakuni我希望div在我想要的地方，而不仅仅是按顺序排列。为此，我应该给所有div位置：inline block，这样它们就可以在同一行中。为什么要设置
位置像top:50%left:50%
@lalitbhakuni你的意思是我应该设置位置
top:50%；左：50%？。还是你在问我为什么这么做？如果是那样的话，我没有。我所做的是身高：50%；宽度：50%
谢谢，它很有效！所以问题是，我对属性
垂直对齐
：）一无所知，再次非常感谢！