Css 使用哪个位置显示彼此下方的DIV

Css 使用哪个位置显示彼此下方的DIV,css,html,css-position,Css,Html,Css Position,我想创建两个div一个接一个。我希望在调整浏览器大小时,div可以在不重叠的情况下改变大小 例如: 此图显示了我现在拥有的内容(这是当我调整浏览器大小时发生的情况,但在100%时工作正常,并且没有重叠): 这是HTML: <div style="z-index: 15; position: absolute; left: 0; padding-left: 20px; padding-top: 10px; font-weight: bold; color: #00A0BE;">

我想创建两个
div
一个接一个。我希望在调整浏览器大小时,
div
可以在不重叠的情况下改变大小

例如:

此图显示了我现在拥有的内容(这是当我调整浏览器大小时发生的情况,但在100%时工作正常,并且没有重叠):

这是HTML:

<div style="z-index: 15; position: absolute; left: 0; padding-left: 20px; padding-top: 10px; font-weight: bold; color: #00A0BE;">
                    State-Of-The-Art-Technology
                </div>
                <div style="z-index: 14; position: absolute; left: 0; padding-left: 40px; padding-top: 35px; padding-right: 8px; font-weight: normal; color: #000000;">
                    Our state-of-the-art technology ensures that we provide the finest healthcare. Our practice continuously invests in systems and equipment so that physicians can diagnose problems in the most accurate and efficient manner possible.
                </div>
                <div style="position: absolute; width: 90%; padding-top: 90px; padding-left: 5%; padding-right: 5%;"><hr /></div>
                <div style="z-index: 13; position: absolute; left: 0; padding-left: 20px; padding-top: 110px; font-weight: bold; color: #00A0BE;">
                    Advanced Electronic Medical Records
                </div>
                <div style="z-index: 12; position: absolute; left: 0; padding-left: 40px; padding-top: 135px; padding-right: 8px; font-weight: normal; color: #000000;">
                    Our advanced electronic medical record improves patient care and gives physicians all of the important patient information they need in one place.
                </div>
                <div style="position: absolute; width: 90%; padding-top: 175px; padding-left: 5%; padding-right: 5%;"><hr /></div>
                <div style="z-index: 11; position: absolute; left: 0; padding-left: 20px; padding-top: 200px; font-weight: bold; color: #00A0BE;">
                    Premier Radiology Services
                </div>
                <div style="z-index: 10; position: absolute; left: 0; padding-left: 40px; padding-top: 225px; padding-right: 8px; font-weight: normal; color: #000000;">
                    Filmless radiology capabilities provide rapid results and allow physicians to view images on an office computer screen within minutes. Our premier radiology services include MRI, CT scan, ultrasonography, nuclear medicine, bone densitometry and mammography. We offer computer-aided diagnosis (CAD), which is a tool to assist the radiologist in more accurately diagnosing breast disease.
                </div>

最新技术
我们最先进的技术确保我们提供最好的医疗保健。我们的机构持续投资于系统和设备,以便医生能够以最准确、最有效的方式诊断问题。

高级电子病历 我们先进的电子病历改善了患者护理,并将医生需要的所有重要患者信息集中在一个地方。
卓越放射服务 无胶片放射学功能提供快速结果,允许医生在几分钟内在办公室电脑屏幕上查看图像。我们一流的放射服务包括MRI、CT扫描、超声检查、核医学、骨密度测量和乳房X光摄影。我们提供计算机辅助诊断(CAD),这是一种帮助放射科医生更准确地诊断乳腺疾病的工具。

如何解决该问题?

使用
位置:相对
来定位div相对于其他元素(即其他div)的位置


Fiddle:

使用
position:relative
定位div相对于其他元素(即其他div)的位置


小提琴:

在divs上使用
位置:相对
而不是
位置:绝对
在divs上使用
位置:相对
而不是
位置:绝对

您将要更改所有位置:绝对;至
位置:相对


完成后,您的填充物很可能需要调整。

您需要更改所有位置:绝对;至
位置:相对


一旦这样做了,你的填充物很可能需要调整。

我刚想出来,但当我意识到你回答时。。。LOLI刚想出来但当我意识到你回答的时候。。。LOLI刚想出来但当我意识到你回答的时候。。。LOLI刚想出来但当我意识到你回答的时候。。。LOLI刚想出来但当我意识到你回答的时候。。。LOLI刚想出来但当我意识到你回答的时候。。。英雄联盟