absolute绝对定位的非绝对定位用法

总结:

position为absolute的元素如果没有设置left, top等值与left:0;top:0;的的效果是不一样的。例如一个div中有个absolute属性元素,其没有left或是top值,其会像个普通的inline-block属性元素一样静静地呆在这个div 里面,但是一旦设置了left:0;top:0;对不起,这个absolute元素立马变身,直接从DOM tree里面脱离,独立于文档流,结果相对于最近的relative属性的祖先标签定位(如果没有,就body定位)。

时间: 2024-08-28 18:47:28

absolute绝对定位的非绝对定位用法的相关文章

absolut绝对定位的非绝对定位用法

一.absolute绝对定位的流行用法 一般而言,我们会用absolute绝对定位做什么呢?就是绝对定位,顾名思意,定死在某个位置上.例如,lightbox效果就是使用的绝对定位,例如新浪微博的弹出提示信息,我要转发李冰冰姐姐的微博,结果就会弹出: 还有就是与父relative相对定位标签结合使用,实现相对于父标签的绝对定位效果,例如人人网的搜索下拉菜单效果: 这里用法少不了的是left(right)绝对定位值或是top(bottom)值,否则绝对定位的位置会跟设置了left为0,top为0值一

逻辑表达式的用法 与或非的用法

先说逻辑与(&&),它可以从三个层次进行理解 第一个层次最简单,就是简单的布尔值之间的逻辑与,就是左值和右值都是true时,返回true,两边都是false或者两边的值其中一边是fasle,就返回false:(AND操作): 第二个层次,(false,null,indefined,0,-0,NaN和""这些都是假值,其他所有的值包括对象都是真值),对这些"真值"和"假值"进行AND操作,返回一个"真值"或者&q

PHP静态方法与非静态方法用法及区别

1.用static关键字来修饰类的属性.方法,称这些属性.方法为静态属性.静态方法:static关键字声明一个属性或方法是和类相关的,而不是和类的某个特定的实例相关,因此,这类属性或方法也称为"类属性"或"类方法".静态类不是不可以实例化,而是不需要实例化就可以用. 2.设计静态方法的目的是为了不用实例化对象直接用类名快速调用. 3.static 的属性和方法,只能访问static的属性和方法,不能类访问非静态的属性和方法.因为静态属性和方法被创建时,可能还没有任何

[css] 页面重构“鑫三无准则” 之“无宽度”准则

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]本文地址:http://www.zhangxinxu.com/wordpress/?p=1152 一.关于“鑫三无准则” “鑫三无准则”这个概念早在去年我写“关于Google圆角高光高宽自适应按钮及其拓展”一文时就已经提到了.这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则,即“无宽度”.“无图片”和“无浮动”,目的是使CSS布局模块化以及增强可扩展性. 此准则是针对我个人的,可能没有

博文收藏

1.absolute绝对定位的非绝对定位用法 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=608 position为absolute的元素如果没有设置left, top等值与left:0;top:0;的的效果为何不一样?相信您应该知道答案了,例如一个div中有个absolute属性元素,其没有left或是top值,其会像个普通的inline-block属性元素一样静

绝对定位 position:absolute,相对定位 position:relative

<1> 当我们要使用绝对定位的时候,必须要有两个条件 1>必须给父元素加定位属性,一般建议使用 position:relative(即:给父元素设为相对定位); 2>给子元素,加绝对定位position:absolute(给子元素设置为绝对定位); 同时加方向属性(top ,left,rigth,bottom) 绝对定位是以父元素为基准点,进行定位(如果他没有父元素,或者它的父元素没有设置position:relative属性)它就会以<body>为基准点进行定位.绝对

CSS position绝对定位absolute relative

常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构   -   TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对

秒懂相对定位与绝对定位,【组合拳relative,absolute】 瞬间清醒有木有?

上文:组合拳 层级关系为: <div ----------- position:relative; 不是最近的祖先定位元素,不是参照物 <div----------没有设置为定位元素,不是参照物 <div-------- position:relative 参照物 <div box1 <div box2 --–position:absolute; top:50px; left:120px; <div box3 效果图: 为改变参照物(橘色框)后的效果 层级关系为: &l

DIV CSS position绝对定位absolute relative教程篇

常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构   -   TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对