Question

今天我发现了一个不寻常的问题，同时将一个快速的“正在建设中”类型页面放在一起，我正在使用相对定位将文本移动到图像上。（如果你愿意的话，这个页面是由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所在的空白区域。

有什么方法吗？

Answer 1

相对定位元素仍占用空间。你真的想要一个绝对定位的元素......你只是希望它绝对相对于容器定位！

<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具有position: relative样式集
子div设置了position: absolute样式，使其位于父中的绝对坐标处。

我相对于父级的顶部定位，并使定位div全宽以允许text-align: center工作。

修改为了使IE6正确定位，我使用了一个hack来强制容器DIV的布局：zoom: 1样式。如果您不需要支持IE6，则可以省略它。

经过测试：FF3，IE6，Chrome1，Chromium2

演示：http://jsbin.com/uqisa

Answer 2

而不是：

position: relative;
top: -300px;

试试这个：

margin-top: -300px;

另请注意，在<img />标记内，您还应更改此内容：

width="799px" height="600px"

到此：

width="799" height="600"

CSS相对定位奇怪的挑剔问题

2 个答案: