祸国
2016-04-21 14:22
absolute relative 和fixed有什么区别
absolute:绝对定位{需要设置position:absolutc(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用”left right top bottom属性相对于其最近的一个具有定位属性的父包含进行绝对定位。如果不存在这样的包含块,则相对body元素,即相对于浏览器窗口。
relative:相对定位{ 如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),他通过left right top bottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度有left right top bottom 属性确定,偏移前的位置保留不动。
fixed:固定定位{ 表示固定定位,与absolute定位类型类似,但他的相对移动的坐标视图(屏幕内的网页窗口)本身。由于视图本身是固定的,他不会随浏览器窗口的滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定的点位的元素会始终定位于浏览器的某个窗口内视图的某个位置,不会受某文档流影响。
absolute:是相对于父级元素进行定位,设置后元素会脱离文档流,成为独立的个体;
relative:是相对于自身进行定位,设置后原始元素位置不会受到影响;
fixed:是特殊的absolute,即总是以body为定位对象的,按照浏览器的窗口进行定位。
三者的效果自己进行实验下会理解得比较深刻。
relative(相对定位) 对象不可层叠、不脱离文档流
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。
fixed(固定定位) 所固定的参照对像是可视窗口而并非是body或是父级元素
absolute是相对于父元素的位置,如果是全局环境中,则是相对与浏览器中的位置;
relative是相对与本身的初始位置而言;
fixed是绝对定位,相对于浏览器窗口而言,跟上面提到的absolute的后面的那个特殊例子一样
初识HTML(5)+CSS(3)-升级版
1225809 学习 · 18234 问题
相似问题