参考:http://www.zhangxinxu.com/wordpress/2011/03/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9relativeabsolute%E5%AE%9A%E4%BD%8D%E7%B3%BB%E5%88%97%EF%BC%88%E4%B8%89%EF%BC%89/

absolute正业之元素隐藏

元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:nonedisplay:block/inline来实现DOM元素的显隐控制,那你就out了。就元素的显示与隐藏实现,使用display在有些时候算是比较糟糕的方法了。

控制元素显隐的方法很多,但是本文不是讲元素显隐控制的,所以,只讲与absolute相关的一些方法。
absolute属性相关的隐藏方法,我知道的有三种,分别如下:

.hidden{
position:absolute;
top:-9999em;
}
.hidden{
position:absolute;
visibility:hidden;
}
.hidden{
position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

使用absolute属性控制DOM元素的显隐有三个关键点:页面可用性回流与渲染配合JavaScript的控制

元素隐藏 css的更多相关文章

  1. CSS中如何让元素隐藏

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不 ...

  2. css元素隐藏(display:none和visibility:hidden)

    在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css  display:none 当使用该样式的时候,HTML元素的宽高等 ...

  3. 您可能不知道的CSS元素隐藏“失效”以其妙用

    您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...

  4. 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...

  5. CSS元素隐藏的display和visibility

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间, ...

  6. CSS元素隐藏

    { display: none; /* 不占据空间,无法点击 */ } /*************************************************************** ...

  7. 你可能不知道的CSS元素隐藏“失效”以其妙用

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀--一个一个看. { display: none; /* 不占据空 ...

  8. HTML元素隐藏和显示

    在web前端开发过程中,经常会用到隐藏和显示元素的方法 总结:1.通过JS或Jquery控制          2.通过CSS样式控制 一.Js或jquery (jquery为例) 1.隐藏元素 使用 ...

  9. 使用chrome查看页面元素的css样式

    使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...

随机推荐

  1. C++和C#实现剪切板数据交互

    c#端由于system.windows.form自带的剪切板功能太少,所以写了一个Helper类把接口转了出来.这样就可以用不同的uint的id了. 并且自带的剪切板必须执行在[STAThread]模 ...

  2. Atitit.故障排除系列---php 程序网站数据库错误排除流程

    Atitit.故障排除系列---php 程序网站数据库错误排除流程 Php页面报告的错误不能定位到myusql的db配置上...字说是db conn err Mysql 接入错误...大概查看哈能不能 ...

  3. 对象.delegate=self的理解

    整理自:http://www.cocoachina.com/ask/questions/show/87430 各位大神,对象.delegate=self是啥意思,委托的意思不就是自己的任务交给其他人去 ...

  4. JMeter学习笔记(二)

    3.JMeter测试计划要素 JMeter中一个脚本即是一个测试计划,也是一个管理单元.JMeter的请求模拟与并发数(设置线程数,一个线程代表一个虚拟用户)设置都在脚本文件中一起设置. 要素一:脚本 ...

  5. ThreadPool has stuck threads

    weblogic 10后台出现警告,原因:ThreadPool has stuck threads 在WEBLOGIC中如果一个线程执行时间超过了Stuck Thread Max Time规定的时间, ...

  6. Hive Compiler过程

    通过Parser将HiveQL转换成AST,通过Semantic Analyzer将AST转换为QB,通过Logical Plan Generator将QB转换成Operator Tree,通过Log ...

  7. c#开源项目[转]

    一.AOP框架 Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行时代码,而其它AOP框架依赖配置文件的方式.这种部署方面(as ...

  8. st16c554

    /* * st16c554.c * * TWO ST16C554 driver for AMCC PPC405EP * * Author: Li Zhi You/Zhu jiang <godis ...

  9. 基于Ambari构建自己的大数据平台产品

    目前市场上常见的企业级大数据平台型的产品主流的有两个,一个是Cloudera公司推出的CDH,一个是Hortonworks公司推出的一套HDP,其中HDP是以开源的Ambari作为一个管理监控工具,C ...

  10. 利用CSS生成精美细线Table表格

    精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差.这里推荐直接使用css来产生一个细线表格. 使用方法也很简单: 第一 ...