首页 > 代码库 > css postion 属性区别【原】
css postion 属性区别【原】
CSS样式中的postion元素有四个属性，即static | absolute | fixed | relative。
static：
默认值。无特殊定位，遵循HTML基本定位规则 。
fixed：
固定定位，参照位置是浏览器窗口的左上角，即坐标点为(0px, 0px);
relative :
对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
absolute：
绝对定位，参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角。
将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义。
示例代码：
<!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-Type" content="text/html; charset=gbk" /><title>fixed和relative和absolute的区别</title><style type="text/css"> body{color:black;} #static {position:static; left:100px;top:100px;width:100px; height:100px; border:1px solid black;} #fixed {position:fixed; left:100px;top:100px;width:100px; height:100px; background:red;} #relative{position:relative;left:100px;top:100px;width:900px; height:900px; border:1px solid blue;} #absolute{position:absolute;left:100px;top:100px;width:100px; height:100px; background:yellow;}</style></head><body> <div id="static">默认static</div> <div id="fixed">fixed固定不变</div> <div id="relative">relative滚动 <div id="absolute">absolute滚动</div> </div> </body></html>
效果图:
css postion 属性区别【原】
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。