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

Question

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

今天我注意到一个不寻常的问题,同时将一个快速的"正在建设"类型页面放在一起,我正在使用相对定位将文本移动到图像上.(如果你关心的话,这个页面是由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>

Run Code Online (Sandbox Code Playgroud)

似乎相对定位的div曾经占据的区域仍占据空间.即如果它没有定位,它会在div下方留下空白区域.

有没有办法解决？

Answer 1

Sho*_*og9 5

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

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

Run Code Online (Sandbox Code Playgroud)

主要变化:

容器div有position: relative样式集
儿童div有position: absolute风格设定,使其定位在绝对坐标父之内.
我相对于父级的顶部定位,并使定位的div全宽度允许text-align: center工作.

编辑: 为了让IE6正确定位,我使用了一个黑客来强制容器DIV的布局:zoom: 1样式.如果您不需要支持IE6,则可以省略它.

测试范围:FF3,IE6,Chrome1,Chromium2

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

归档时间：	16 年，8 月前
查看次数：	2704 次
最近记录：	15 年，3 月前