参考: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. spine 所有动画的第一帧必须把所有能K的都K上

    spine 所有动画的第一帧必须把所有能K的都K上.否则在快速切换动画时会出问题.

  2. 关于C与python交互设想及文章汇总

    gui: gtk by c 后台: python Python实例浅谈之三Python与C/C++相互调用 Python 与 C/C++ 交互的几种方式 C语言 + GTK3+ Visual Stud ...

  3. 错误:undefined reference to `__gxx_personality_v0'

    使用gcc编译C代码,引用了C++ 库,出现这个错误,网上搜到这哥们的文章,解决问题 转自:错误:undefined reference to `__gxx_personality_v0' 1. Li ...

  4. shell学习笔记之控制结构(三)

    1.if语句 if condition then statements esle statements fi 例: #!/bin/sh echo "Is it morning? Please ...

  5. Shell脚本中调用另外一个脚本的方法

    (转载): 在Linux平台上开发,经常会在console(控制台)上执行另外一个脚本文件,经常用的方法有:./my.sh 或 source my.sh 或 . my.sh:这三种方法有什么不同呢?我 ...

  6. onResume

    比如做一个音乐播放程序,在播放过程中,突然有电话打进来了,这时系统自动调出电话,而你的音乐播放程序置于后台,触发了onPause方法.当你电话结束后,关闭电话,又自动回到音乐播放程序,此时,触发onR ...

  7. 利用table-cell实现元素居中对齐

    vertical-align对一些特定显示样式(例如单元格显示方式:table-cell)的元素才会起作用.所以要实现上下垂直居中对齐,可以采用如下样式 display:table-cell;     ...

  8. ZooKeepr日志清理(转)

    转载请用注明:@ni掌柜 nileader@gmail.com 在使用zookeeper过程中,我们知道,会有dataDir和dataLogDir两个目录,分别用于snapshot和事务日志的输出(默 ...

  9. 删除Cookies

    网上一堆删除Cookies的JS代码 但是都删不了,找了好久终于在MSDN的论坛找到一个方法 function ClearCookie(name) { ****; var expDate = new ...

  10. asp.net 正在加载/处理(兼容IE Chrome)

    正在加载分两种 一种是页面初始化效果,也就是数据读取前,这个时候需要用ajax先显示读取中数据,当ajax回调的时候,读取页面数据 一种是界面读取中效果,就是用div显示,当OnPreRenderCo ...