relative、absolute和float

relative、absolute和float

　　position:relative和position:absolute都可以改变元素在文档中的位置，都能激活元素的left、top、right、bottom和z-index属性。（默认这些属性未激活，设置了也无效）

　　设置position:relative和position:absolute都会让元素浮起来，会改变正常情况下的文档流。

　　不同：

　　position:relative会保留自己在z-index:0层的占位，left、top、right、bottom值是相对于自己在z-index层的位置。

　　position:absolute会完全脱离文档流，不再z-index:0层保留占位符，其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的，如果祖先元素全都没有设置，那么就相对于body元素。

　　float也能改变文档流，不同的是，float不会让元素浮到另一个元素上面，它仍然让元素在z-index:0层排列，只能通过float:left和float:right来控制元素在同一层里"左浮"和"右浮"。float会改变正常的文档流排列，影响周围元素。

　　position:absolute和float会隐式的改变display类型，不论之前什么类型的元素（display:none除外）,只要设置了position:absolute和float中任何一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。就算显示的设置display:inline或者display:block，也仍然无效（IE6双倍边距BUG利用display:inline解决）。

　　position:relative却不会隐式改变display类型。

http://i.cnblogs.com/EditPosts.aspx?opt=1

时间： 2024-11-20 12:23:51

relative、absolute和float的相关文章

[转]relative、absolute和float

position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活,设置了也无效) 设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流. 不同: position:relative会保留自己在z-index:0层的占位,left.top.right.bottom值是相对于自己在z-index层的位置.

10步掌握CSS布局定位: position static relative absolute float

无意中看到此文,因作者强调其中避开了浏览器bug/分歧,所以个人认为值得借鉴. 不才仔细看了此文,自觉受益匪浅 ,屡试不爽,佩服作者对css布局的精炼总结,顺便小译了一段, 英文水平有限,且个人通常写写php,对css了解不深却有点兴趣,错误之处还请指正. 个人没有空间,代码中的css文件和js保留了完整路径:http://www.barelyfitz.com/screencast/html-training/css/positioning/ 原文地址:http://www.barelyfitz

css absolute和float，relative，z-index的同异

大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b 摘录: float是欺骗父元素,让其父元素误以为其高度塌陷了,但float元素本身仍处于文档流中,文字会环绕着float元素,不会被遮蔽. absolute(层级高)其实已经不能算是欺骗父元素了,而是出现了层级关系. 一旦给元素加上absolute或float就相当于给元素加上了display:block;,就可以给元素定宽width了. 未指定left/top/right/bottom的a

CSS position relative absolute fixed

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的

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

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

/*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/

1 <!DOCTYPE html> 2 /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/ 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .touch:hover .content{ 9 vi

absolute 和float

position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度 float也是典型的inline-block化元素,这种元素的inline-block化适用于任何水平的标签.例如平时我们要让span标签支持width属性,可能要设置: span { display:block; width:100px; } 但

【前段开发】10步掌握CSS定位: position static relative absolute float

希望能帮到需要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為:static,即該元素出現在文檔的常規位置,不會重新定位. 通常此屬性值可以不設置,除非是要覆蓋之前的定義. #div-1 { position:static; }    .    .    .    .    .    .

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

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