参考: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. PCI & PCIE Configuration Register Space

    1.PCI-Compatible Configurationbits [1:0] are hard-wired, read-only and must return zeros when read.b ...

  2. [docker]存储驱动overlay和overlay2的区别

    overlay和overlay2的区别 参考:http://blog.csdn.net/styshoo/article/details/60715942 docker pull ubuntu 本质区别 ...

  3. Decoration4:分页展示

    现在我们实现前台List的分页展示,这也是最基本的要求 先看现在的Rest数据格式,在spring的默认返回中,分页用到的元素都已经在page节点中返回了,只要在前台合理利用就足够了 { " ...

  4. GDKOI2016 爆零记

    滚粗了非常伤心>_< day 0 老师通知能够去试机,于是非常愉快地将近三点半左右的时间到了二中.然后发现老师已经准备关机房了,说我怎么才来.. .喂喂喂不是说三点半到五点的么 晚上本来想 ...

  5. CA证书的办理

    北京市地方税务局与北京数字证书认证中心(Beijing Certificate Authority ,简称BJCA)合作, 在北京市地方税务局网上纳税及其他网上业务系统中使用BJCA数字证书, 北京数 ...

  6. OS开发UI篇—UIWindow简单介绍

    一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWindow,接着创建控制器的view,最后将控 ...

  7. 2、visual studio 常用设置

    1.关闭 “引用” 提示 有时候感觉 “方法” 或者 “类” 上的引用有点乱: 去掉它的步骤: 1)在 “引用”文字上单击鼠标右键: 2)在弹出的“选项” 对话框中,取消 CodeLens: 2.打开 ...

  8. 如何在Windows下面运行hadoop的MapReduce程序

    在Windows下面运行hadoop的MapReduce程序的方法: 1.下载hadoop的安装包,这里使用的是"hadoop-2.6.4.tar.gz": 2.将安装包直接解压到 ...

  9. Error C2280

    原因:默认参数用的assignment,而不是reference,要知道ostream并没有实现copy constructor/assignment operator(通过bing.com搜索Err ...

  10. poj3067 Japan(树状数组)

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:id=3067">http://poj.org/problem? id=3067 Descri ...