position 绝对定位的问题
2010-01-19 14:37
141 查看
今天做页的时候,碰到了一个问题: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)";
}
<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)";
}
相关文章推荐
- IE6/IE7下position:absolute;绝对定位偏移、不显示问题
- IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
- 解决IE6 下 position:fixed 绝对定位的问题
- IE6/IE7下position:absolute;绝对定位偏移、不显示问题
- IE6和IE7下绝对定位position:absolute和margin的冲突问题解决
- position 绝对定位的问题
- IE7以下绝对定位position被后面元素遮挡问题
- position absolute 绝对定位 设置问题
- IE6和IE7下绝对定位position:absolute和margin的冲突问题解决
- CSS教程:position 绝对定位的问题
- IE7以下绝对定位position被后面元素遮挡问题
- 记一个比较有意思的bug,position绝对定位问题
- IE6、IE7下绝对定位position:absolute和margin的冲突bug解决方法
- IE6,浮动(float)遇到绝对定位(position)-->ie6使用绝对定位position:absolute,box不显示
- style中position div定位和嵌套问题
- 关于元素绝对定位的父元素问题
- 对于网上解除 IE6 下 position 的 fixed 定位问题的补充
- 绝对定位常见误区:position:absolute相对于谁定位、及当溢出时怎么隐藏
- 当子级元素浮动时让父级元素高度自适应的三种方法(以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法)