相对定位、绝对定位、固定定位区别

position: relative; 相对定位

　　a、不影响元素本身特性；

　　b、不使元素脱离文档流；

　　c、如果没有定位偏移量，对元素本身没有任何影响

position; absolute: 绝对定位

　　a、使元素完全脱离文档流

　　b、使内嵌支持宽高

　　c、块属性标签内容撑开宽度

　　d、如果有定位父级相对与定位父级发生偏移，没有定位父级相对与整个文档发生偏移

　　e、相对定位一般配合绝对定位一起使用

position: fixed; 固定定位

　　与绝对定位的特性基本一致，差别是始终相对与整个文档进行定位

　　问题：IE6不支持固定定位

时间： 2024-10-05 04:58:56

相对定位、绝对定位、固定定位区别的相关文章

理解CSS相对定位和固定定位

× 目录 [1]相对定位 [2]固定定位前面的话一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolute绝对定位的基础和应用,这篇博客介绍和梳理相对定位relative和固定定位fixed的相关知识相对定位定义可能理解起来最简单的定位机制就是相对定位了.采用这种机制时,通过使用偏移属性移动定位元素.当元素相对定位时,它会从其正常位置移走,不过,原来所占的空间并不会因此消失.相对定位元素,会为其

HTML定位——绝对定位和相对定位、固定定位

1.绝对定位绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间. 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素.如果当前需要被定为的元素没有已定位的祖先元素作为参考值,则相对于整个网页. position:absolute: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UT

web前端入门到实战：css绝对定位和相对定位、固定定位

1.绝对定位 position:absolute: 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间.绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素.如果当前需要被定为的元素没有已定位的祖先元素作为参考值,则相对于整个网页. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

层模型--绝对定位、相对定位、固定定位

绝对定位: 如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口. 如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px. div{ width:200px; height:200px; border:2px red

网站布局之------浮动(float)和定位(position)(绝对定位，相对定位，静态固定定位)，***什么叫脱离文档流？

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

css固定定位与绝对定位的区别

绝对定位中当一个DIV块的位置被定义为绝对定位的时候,也就失去了文档流即失去原本的位置,并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找,直到找到body为止)来进行偏移, 固定定位其实和绝对定位有很多相似之处只不过是基于当前页面来偏移. 我们可以用代码来验证代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

webbasic之相对定位、绝对定位、固定定位

1.相对定位 -以自己为目标 -较小的偏移 -不脱离队伍(流)//位置不会释放 position:relative left:值 right:值 <!doctype html> <html> <head> <meta charset="utf-8"/> <title>照片墙</title> <style> /*先刷墙*/ bo

相对定位 and 绝对定位 and 固定定位

CSS盒子定位有三种相对定位 position: relative; 绝对定位 position: absolute; 固定定位 position: fixed; 相对定位 position: relative;

CSS层模型中的绝对定位相对定位固定定位

1.绝对定位:元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接近的恶意个具有定位属性的父包含块进行绝对定位.如果不存在这么一个元素,则相对于body元素而言,也就是说相对浏览器而言. 2.相对定位:元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档