我注意到一个不寻常的问题，今天，在一起一个快速的“建设中”类型的页面，我正在移动到一个图像上的文字使用相对定位。（如果你介意的话，这一页是由SO的离线页面“启发”的）
<html>
<head>
<title>Bronco Marching Band</title>
</head>
<body style="background-color: #888;">
<div style="text-align: center;">
<img src="standby.jpg" width="799px" height="600px" alt="Please Stand By"
title="The Bronco Band website is down for a major upgrade. Please check back later."
style="width: 620px; height: 465px; opacity: 0.8;" />
<div style="color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: relative; top: -300px; left: 0px;">
PLEASE STAND BY
</div>
</div>
</body>
</html>
似乎相对定位的div所在的区域仍在占用空间。也就是说，如果没有定位div，它会在图像下面留下空白。
有办法解决这个问题吗？
最佳答案
相对定位的元素仍然占据空间。你实际上需要一个绝对定位的元素。。。你只想它的位置绝对相对容器！
<div style="text-align: center;position:relative; zoom: 1;">
<img src="standby.jpg" width="799px" height="600px" alt="Please Stand By" title="The Bronco Band website is down for a major upgrade. Please check back later." style="width: 620px; height: 465px; opacity: 0.8;" />
<div style="color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: absolute; top: 200px; left: 0px; width: 100%; text-align:center">
PLEASE STAND BY
</div>
</div>
关键变化：
容器具有
div样式集Child
position: relative设置了div样式，使其位于父级中的绝对坐标处。我相对于父对象的顶部定位，并使定位的
position: absolute全宽度允许div工作。编辑：
为了让IE6正确定位，我使用了一个技巧来强制容器DIV的布局：
text-align: center样式。如果不需要支持IE6，可以省略这个。测试地点：FF3、IE6、Chrome1、Chromium2
演示：http://jsbin.com/uqisa
关于html - CSS相对定位的奇怪问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/787868/