Html 引导行重叠

我有个问题。我试图使引导网格系统有4行，但问题是有些行重叠。我不知道这个问题是从哪里来的。 这把小提琴显示了我的问题

html，正文{
宽度：100%！重要；
身高：100%！重要；
填充：0；
位置：相对位置；
}
#标题秒{
位置：绝对位置；
/*排名：0*/
宽度：100%；
背景颜色：绿色；
身高：15%；
最小高度：30px；
}
#页脚秒{
位置：绝对位置；
底部：0；
宽度：100%；
背景色：黑色；
身高：5%；
}
#数据查看器{
身高：60%；
}
#区域地理{
身高：20%；
}

标题
区域地理
地图
伊迪卡伊沃鲁酒店
页脚

您需要删除位置：绝对

html，正文{
宽度：100%！重要；
身高：100%！重要；
填充：0；
位置：相对位置；
}
#标题秒{
宽度：100%；
背景色：绿色！重要；
身高：15%；
最小高度：30px；
}
#页脚秒{
位置：绝对位置；
底部：0；
宽度：100%；
背景色：黑色；
身高：5%；
}
#数据查看器{
身高：60%；
}
#区域地理{
身高：20%；
}

标题
区域地理
地图
伊迪卡伊沃鲁酒店
页脚

你能解释一下你在OP的代码中添加了什么吗？为什么要添加它？绝对定位造成了如此糟糕的视觉效果。这是绝对定位造成的。你能解释一下你用这些做什么吗？