假设绝对定位的元素的id为absoluteDiv。

当包含absoluteDiv的块中没有设置position:relative时, absoluteDiv会相对于浏览器(window.top)定位。如果包含absoluteDiv的块中设置position:relative了, 不管这个块是其父级, 还是其父级, absoluteDiv都会相对于这个块开定位。

下面这个例子可以证明这一点

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <style type="text/css">
  6. .detailInfo{
  7.     filter:alpha(opacity=50);
  8.     opacity: 0.5;
  9.     position: absolute;
  10.     text-align: center;
  11.     background-color: #ffffff;
  12.     top: 1px;
  13.     left:1px;
  14.     width: 100%;
  15.     height: 100%;
  16. }
  17. </style>
  18. <title>正则表达式</title>
  19. </head>
  20. <body>
  21. <div style="width: 400px; height: 300px; position: relative; margin:50px 50px; border: 1px solid #000000">
  22.     <div style="width: 270px; height: 166px; margin:50px 50px; border: 1px solid #FF0000">
  23.         <img src="./images/screencut.png" border="0" />
  24.         <div class="detailInfo">
  25.             descript here
  26.         </div>
  27.     </div>
  28. </div>
  29. </body>
  30. </html>

效果截图:

css的绝对定位的更多相关文章

  1. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  2. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  3. cordova 导致css中绝对定位top:0会被顶到视图之外

    IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...

  4. CSS的绝对定位和相对定位

    css定位标签position包括两个值:relative(相对定位)和absolute(绝对定位),position样式一般都是和top.bottom.left.right一起使用来确定一个标签的位 ...

  5. CSS中绝对定位依据谁进行定位？

    结论 绝对定位的top等的依据元素需满足3个条件: 已定位(position:relative/fixed/absolute) 最近的 祖辈元素(一定是祖辈元素不是同辈元素) 说明 一般会为body设 ...

  6. CSS：绝对定位布局案例 position布局实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

    相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...

  8. 【css】绝对定位的元素在 ie6 下不显示

    问题描述: 在 ie6 中如果一个浮动元素与绝对定位元素相邻的话,在某些情况下绝对定位元素将会消失. 产生原因: 只有当绝对定位元素的邻近浮动元素的宽度大于父层宽度减 3 时(即如果父层宽度是 300 ...

  9. css 相对绝对定位

    用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题.这就要用到Position属性等.Position属性有四个值:static.fixed.absolute和relativ ...

随机推荐

  1. SQL中 and or优先级问题（转）

    刚刚在项目中遇到这样一个问题,SQL语句如下: select * from LOAN_BACK_LIBRARY where LIBRARY_ID=1 or LIB_ID=1 and STATUS=3 ...

  2. Visual C++编程命名规则

    一.程序风格:      1.严格采用阶梯层次组织程序代码:      各层次缩进的分格采用VC的缺省风格,即每层次缩进为4格,括号位于下一行.要求相匹配的大括号在同一列,对继行则要求再缩进4格.例如 ...

  3. Linux内核中常见内存分配函数（二）

    常用内存分配函数 __get_free_pages unsigned long __get_free_pages(gfp_t gfp_mask, unsigned int order) __get_f ...

  4. Codeforces 148D Bag of mice 概率dp（水

    题目链接:http://codeforces.com/problemset/problem/148/D 题意: 原来袋子里有w仅仅白鼠和b仅仅黑鼠 龙和王妃轮流从袋子里抓老鼠. 谁先抓到白色老师谁就赢 ...

  5. 呵呵！手把手带你在 IIS 上执行 Python

    公司的站点让我头痛死了.在众多前辈高手的带领下.一大堆的 CMD 在站点里执行得好好地,黑客攻击也好好地.仅仅有站点和我不好好地,我快累死了,站点快挂了.. . 为了解决问题.我想到了 Python ...

  6. multiset集合容器的集合运算：并、交、差

    set和multiset的内部通常是采用平衡二叉树来实现.当放入元素时,会按照一定的排序方法自动排序,默认是按照less<>排序规则来排序.这种自动排序的特性加速了元素查找的过程,但问题是 ...

  7. 使用Oracle安装账户登录数据库

    如果Linux或Unix平台,安装了Oracle,而且有root账号,则使用“su Oracle安装账户”的方式,sqlplus登录到数据库,这种方式是最可靠的.正如@dbsnake所说,”主要是Or ...

  8. Metropolis Hasting算法

    Metropolis Hasting Algorithm: MH算法也是一种基于模拟的MCMC技术,一个非常重要的应用是从给定的概率分布中抽样.主要原理是构造了一个精妙的Markov链,使得该链的稳态 ...

  9. OAuth2.0开发指南

    OAuth2.0开发指南 1.认证与登录 来往开放平台支持3种不同的OAuth 2.0验证与授权流程: 服务端流程(协议中Authorization Code Flow): 此流程适用于在Web服务端 ...

  10. PipedInputStream/PipedOutputStream原理

    PipedInputStream类与PipedOutputStream类用于在应用程序中创建管道通信.一个PipedInputStream实例对象必须和一个PipedOutputStream实例对象进 ...