用于在彼此之下显示DIV的位置

时间:2014-03-11 19:29:44

标签: css html css-position

我想在另一个上面创建两个divs。我希望这样做,以便在调整浏览器大小时div更改大小而不会重叠在另一个上面。

实施例: enter image description here

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

enter image description here

这是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>

如何解决问题?

3 个答案:

答案 0 :(得分:1)

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

小提琴:http://jsfiddle.net/S9tw4/

答案 1 :(得分:1)

在div上使用position: relative代替position: absolute

答案 2 :(得分:1)

你想要改变所有的位置:绝对;到position: relative;

一旦完成,你的填充很可能需要调整。