Html 避免与绝对位置重叠，以响应

我试图创建一个包含一些基本文本元素的div。我的要求是div中的元素应该根据div对齐，因此我使用绝对定位，将主div定位为相对，并为其提供百分比值，以便它们可以在响应屏幕中工作。我甚至改变了一些媒体屏幕上的上下百分比。但是，在某些情况下，当屏幕大小改变时，一个文本块或div与另一个重叠。是否有一种方法可以避免响应屏幕中的这种重叠。提前感谢：）

。标题{
位置：相对位置；
}
.品目h3{
最高：1%；
位置：绝对位置；
左：0；
右：0；
}
.文本{
位置：绝对位置；
排名前10%；
}
.底部{
位置：绝对位置；
最高：60%；
}

标题部分
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。信息技术
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

这是结尾部分

好的，我可以给你一个解决方案，通过如下设置

最小高度来轻松修复：


。标题{
位置：相对位置；
最小高度：100px；
}
.品目h3{
最高：1%；
位置：绝对位置；
左：0；
右：0；
}
.文本{
位置：绝对位置；
排名前10%；
}
.底部{
位置：绝对位置；
最高：60%；
}

标题部分
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。信息技术
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

这是结尾部分
你为什么要
绝对
这个div，你可以简单地做这个
float:left
属性谢谢你。我试试看。@Harish当然<代码>：）

请告诉我。谢谢。我已经完全删除了绝对定位。我使用了媒体查询，并做了一些更改@库马尔