当前位置: 首页 > news >正文

position 绝对定位的问题

今天做页的时候,碰到了一个问题: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)";
}

相关文章:

  • phpmyadmin建表出错 #1064 - You have an error in your SQL syntax;
  • 一个女程序员的征婚信息
  • :“Failed to access IIS metabase”解决方法
  • 用户***/aspnet登陆失败
  • sql 2005拒绝了对对象 'xxx' (数据库 'xxx',架构 'dbo')的 SELECT 权限
  • 用min-height实现最小高度(兼容IE6、IE7、FF)
  • css 非表格垂直对齐效果代码
  • msxml6.dll (0x80072EFD) A connection with the server could not be established
  • 怎么查看80端口占用情况? 如何查看端口占用情况?
  • iis 出现HTTP 错误 403.1 禁止访问:禁止执行访问错误
  • 80后的我们拿什么养活自己和家人
  • 80后的成熟
  • 60条令你大吃一惊的小常识
  • SqlHelper数据库操作类
  • 网页插入的播放器代码 ,播放不了AVI的视频
  • @jsonView过滤属性
  • [译]Python中的类属性与实例属性的区别
  • 【腾讯Bugly干货分享】从0到1打造直播 App
  • CSS中外联样式表代表的含义
  • JavaScript 是如何工作的:WebRTC 和对等网络的机制!
  • Javascript基础之Array数组API
  • JS基础篇--通过JS生成由字母与数字组合的随机字符串
  • JS实现简单的MVC模式开发小游戏
  • learning koa2.x
  • log4j2输出到kafka
  • python 装饰器(一)
  • 百度地图API标注+时间轴组件
  • 从 Android Sample ApiDemos 中学习 android.animation API 的用法
  • 浮动相关
  • 关于 Cirru Editor 存储格式
  • 回顾 Swift 多平台移植进度 #2
  • 近期前端发展计划
  • 看域名解析域名安全对SEO的影响
  • 快速构建spring-cloud+sleuth+rabbit+ zipkin+es+kibana+grafana日志跟踪平台
  • 如何用Ubuntu和Xen来设置Kubernetes?
  • 我有几个粽子,和一个故事
  • linux 淘宝开源监控工具tsar
  • UI设计初学者应该如何入门?
  • 函数计算新功能-----支持C#函数
  • ​ ​Redis(五)主从复制:主从模式介绍、配置、拓扑(一主一从结构、一主多从结构、树形主从结构)、原理(复制过程、​​​​​​​数据同步psync)、总结
  • (13)Latex:基于ΤΕΧ的自动排版系统——写论文必备
  • (175)FPGA门控时钟技术
  • (C语言)求出1,2,5三个数不同个数组合为100的组合个数
  • (MATLAB)第五章-矩阵运算
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (ros//EnvironmentVariables)ros环境变量
  • (二十三)Flask之高频面试点
  • (分类)KNN算法- 参数调优
  • (算法)Game
  • (转)Sublime Text3配置Lua运行环境
  • .bat批处理(六):替换字符串中匹配的子串
  • .NET 5.0正式发布,有什么功能特性(翻译)
  • .NET Core WebAPI中使用Log4net 日志级别分类并记录到数据库
  • .net core 控制台应用程序读取配置文件app.config
  • .Net 知识杂记