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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">

.detailInfo{

    filter:alpha(opacity=50);

    opacity: 0.5;

    position: absolute;

    text-align: center;

    background-color: #ffffff;

    top: 1px;

    left:1px;

    width: 100%;

    height: 100%;

}

</style>

<title>正则表达式</title>

</head>

<body>

<div style="width: 400px; height: 300px; position: relative; margin:50px 50px; border: 1px solid #000000">

    <div style="width: 270px; height: 166px; margin:50px 50px; border: 1px solid #FF0000">

        <img src="./images/screencut.png" border="0" />

        <div class="detailInfo">

            descript here

        </div>

    </div>

</div>

</body>

</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. hdu 1690 The Balance_母函数

    题意:给你n个数,这些数可以互相加或者减,输出在范围[1,sum]里不能通过运算得出的数 思路:套母函数模版 #include <iostream> #include<cstdio& ...

  2. win7 Visual Studio 2008 安装程序时出现“ 加载安装组件时遇到问题。取消安装。”处理方法

    win7 Visual Studio 2008 安装程序时出现“ 加载安装组件时遇到问题.取消安装.”处理方法 vs2008试用期到期,卸载.重新安装都会出现“ 加载安装组件时遇到问题.取消安装.”无 ...

  3. C语言 EOF是什么？

    Linux中,在新的一行的开头,按下Ctrl-D,就代表EOF(如果在一行的中间按下Ctrl-D,则表示输出"标准输入"的缓存区,所以这时必须按两次Ctrl-D):Windows中 ...

  4. J2EE学习的一部分--JDBC详细说明

    今天是关于我们JDBC相关知识,左右JDBC我想大家都很熟悉的,我记得在很早以前就开始使用它,我记得那是一个大二的学生做课程设计.但随后以完成任务,所以遇到的问题google,当时没有时间组织,下关于 ...

  5. XML是什么，它能够做什么？——写给XML入门者

    XML就可以扩展标记语言(eXtensible Markup Language).标记是指计算机所能理解的信息符号,通过此种标记,计算机之间能够处理包括各种信息的文章等.怎样定义这些标记,既能够选择国 ...

  6. document load 与document ready的区别

    页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数 问题:如果图片资源较多,加载时间较长,onload后等待执行的函 ...

  7. css 元素居中方法

    目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: <div class="nav-content"> <ul ng-clic ...

  8. 关于常用meta的总结

    入行也半年了,无数次的想过写博客也无数次的想过第一篇会写什么,一直没有落实.今天心血来潮把博客开了,那就写点东西吧.第一篇就写一写看似简单但又经常不注意到的meta标签吧.(博主经验尚浅,有许多理解不 ...

  9. Spring-----代码中使用注入的Properties配置属性

    转载自:http://blog.csdn.net/hekewangzi/article/details/49990799

  10. 前端开发面试题收集 HTML

    Doctype是什么?说明特点. <!doctype>声明必须处于HTML文档的头部,在标签之前. <!doctype>声明不是一个HTML标签,是一个用于告诉浏览器使用哪种H ...