深入理解absolute

一、absolute和float

  1.相同的特性表现:

  <1>包裹性

  <2>破坏性

注意:有时候,其页面布局可以相互替换--------float:;=position:absolute:

2.clear用来限制float;relative用来限制absolute,独立的absolute可以摆脱overflow的限制,无论滚动还是隐藏。

absolute越独立越强大!

   3.绝对定位的行为表现:

    <1>脱离文档流

    <2>去浮动

float造成的环绕效果,absolute保持跟随效果,absolute存在时float失效

    <3>位置跟随

          元素是block那么absolute之后依然是block排列,inline时absolute后依然是inline排列。

     <4>超越overflow

     当父元素没有设置position:relatinve时,子元素position:absolute会超越父元素的overflow: :会显示父元素div以外的样式。

       当父元素设置了position:relative后,子元素就算设置了绝对定位,那么其都不会显示父元素以外的样式了。

注意:在IE7下,任何元素采用绝对定位后,都会inline-block化

解决办法: 在绝对定位元素外面套一层空div就OK

二、配合margin的精确定位

  1.支持负值定位

  2.兼容性超赞---可兼容IE6

 
时间: 2024-08-24 14:32:53

深入理解absolute的相关文章

position学习终结者(一)

position的值有以下五种.现结合样例谈一下我对这五种值的认识: 一.不使用不论什么值: 代码1-1例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

CSS中position属性的理解,相对位置relative,绝对位置absolute,固定fixed,页脚固定的实现2种方法

页脚固定的底部的两种方式: 1.使用fixed属性值 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div style="height: 1500px;width: 100%;background-color: green;margin-bottom: 320px;"> 8 9 <

关于通过jquery来理解position的relative及absolute

一个多月前刚刚开始系统接触Javascript/css/html的时候一直对position属性的relative及absolute不是很了解.今天在接触jquery中无意间发现通过slideToggle() 的滑动效果可以更加方便清楚的了解position属性的含义.下面是代码. <!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.

CSS定位中最难理解的她——absolute的探讨

由于放假,近来无事就随便找点事来玩一下,就学了以后要用到的web开发,看到CSS样式中定位时absolute非常不理解,在网上找了很多解释反而弄得我更困惑了,于是决定自己实验,找出各种关系.关于CSS定位中absolute的特点,我总结起来无非是以下几点: 1.定位position为absolute属性的容器会脱离标准文档流,可以放在整个页面的各个位置(这个当然要与其他属性结合使用): 2.定位的标准为整个页面或者外包裹容器,同级元素不会成为absolute容器的定位标准: 3.当定位为abso

通过案例理解position:relative和position:absolute

w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:absolute困扰了我快一个星期之久,网上找到的资料鱼龙混杂,刚确定“这样”的理解之后,看另一份资料,发现“这样”理解是错了,就这样不断更正,并记录下来,最终整理出这份,以备参阅. 若有错误,请指正. 下面的结果都是基于firefox38版本来测试的. position:relative相对定位 1. 如

CSS深入理解之absolute(HTML/CSS)

absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受relative限制的,行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值: 3.脱离文档流: 4.具有跟随性(依据这个特点,能省很多的relative,并且扩展性更强). 骚操作:使用注释来消除空格 <!doctype html> <html> &l

z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所有的div在深度上排个顺序就可以了.但是,有点投机取巧的感觉,所以想透彻的了解z-index这个属性. CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识.它就类似与photoshop里面图层

css深入理解之absolute

一.absolute和float有相同的特性,包裹性和破坏性 1.absolute和float的相似 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>absolute和float

relative和absolute理解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-