今天做页的时候,碰到了一个问题:div无法对父对象绝对定位。
<div id="fa">
<div id="so" style="position:absolute; top:0; right:12px">
</div>
</div>
但是发现无论怎么调整都是针对body定位,郁闷!
看了下css手册,也没发现有什么不对。到网上查了下,发现了这么一句话:absolute 脱离文档流,通过 top,bottom,left,right 定位,选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
看完后豁然开朗,代码修改如下,
<div id="fa" style="position:relative;">
<div id="so" style="position:absolute; top:0; right:12px">
</div>
</div>
犯了个低级错误!真丢人!难道我的css手册太老了?
我的代码:
<div id="pptt">
<div id="d111">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="48" align="center">Time<br />
<%=sj1%></td>
<td align="left"><%=tt1%></td>
</tr>
</table>
</div>
<div id="d222">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="48" align="center">Time<br />
<%=sj2%></td>
<td align="left"><%=tt2%></td>
</tr>
</table>
</div>
<div id="d333">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="48" align="center">Time<br />
<%=sj3%></td>
<td align="left"><%=tt3%></td>
</tr>
</table>
</div>
</div>
#pptt
{
position:relative;
top:-90px;
width:1003px;
}
#d111
{
background:#000000;
position:absolute;
margin:0;
padding:0;
z-index:1;
/*
top:655px;
left:279px;
*/
top:0px;
left:279px;
color:red;
font-weight:bold;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
height:48px;
width:220px;
opacity: .5;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
#d222
{
background:#000000;
position:absolute;
margin:0;
padding:0;
z-index:1;
/*
top:655px;
left:505px;
*/
top:0px;
left:505px;
color:red;
font-weight:bold;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
height:48px;
width:220px;
opacity: .5;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
#d333
{
background:#000000;
position:absolute;
margin:0;
padding:0;
z-index:1;
/*
top:655px;
left:731px;
*/
top:0px;
left:731px;
color:red;
font-weight:bold;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
height:48px;
width:220px;
opacity: .5;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}