参考: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. 捕获高像素照片(updated)

    可以使用Windows.Phone.Media.Capture.PhotoCaptureDevice 进行高像素图片的捕获(需要自己画视图界面,因为该平台的PhotoChooserTask API 不 ...

  2. python模块之codecs: 自然语言编码转换

    python对多国语言的处理是支持的很好的,它可以处理现在任意编码的字符,这里深入的研究一下python对多种不同语言的处理.    有一点需要清楚的是,当python要做编码转换的时候,会借助于内部 ...

  3. zepto中的tap穿透

    有一个项目,浮层上是有点击的按钮,但是用tap就会穿透,触发浮层下的页面的点击事件.后来问同事和经过自己尝试,发现用click就可以解决这个问题.

  4. xeno 实时性能测试 在100us的采样周期的测试数据

    1 xeno 用户层测试时间: root@sama5d3-linux:/usr/bin latency -t0 -T25 -p100== Sampling period: 100 us== Test ...

  5. debug宏起作用应用

    在linux内核中重新定义了printk,如pr_debug,dev_dbg等.要使用这些宏函数就需要定义DEBUG. 详见:kernel printk信息显示级别 那么DEBUG该定义在什么地方呢? ...

  6. 数学 - SGU 118. Digital Root

    Digital Root Problem's Link Mean: 定义f(n)为n各位数字之和,如果n是各位数,则n个数根是f(n),否则为f(n)的数根. 现在给出n个Ai,求出A1*A2*…*A ...

  7. MapReduce的InputFormat过程的学习

    转自:http://blog.csdn.net/androidlushangderen/article/details/41114259 昨天经过几个小时的学习,把MapReduce的第一个阶段的过程 ...

  8. Python安装相关的机器学习库以及图像处理库

    安装 sudo apt-get install python-scipy sudo apt-get install python-numpy sudo apt-get install python-m ...

  9. HashMap与HashCode有关,用Sort对象排序

    遍历Map,使用keySet()可以返回set值,用keySet()得到key值,使用迭代器遍历,然后使用put()得到value值. 上面这个算法的关键语句: Set s=m.keySet(); I ...

  10. 【BZOJ】1613: [Usaco2007 Jan]Running贝茜的晨练计划(dp)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1613 水题dp 设d[i][j]为i分钟疲劳为j d[i][j]=d[i-1][j-1]+a[i] ...