css中position位置解决.doc

无标题文档 *margin:0;padding:0#idParentDIVwidth:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold; 参考绿移动红Position定位：relative | absolute 定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。 定位的定义： 在CSS中关于定位的内容是： position:relative | absolute | static | fixed static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。 relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过top,bottom,left,right定位，并且可以通过z-index进行层次分级。 absolute(绝对定位) 脱离文档流，通过top,bottom,left,right定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。请从下方选择我的 position 值。-请选择-staticabsoluterelativefunction rdl_change(e) var val = $(#idSel).val(); if(null!=val) $(div:contains(移动红).attr(style,height:50px;width:50px;background:#f00;left:50px;top:50px;position:+val); 什么都不选时，默认的文档显示结构1.static没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。（与不设定positon显示一致）。2、absolute：absolute(绝对定位)脱离文档流，通过top,bottom,left,right定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。1）、脱离文档流：即当前元素在未定位前的位置已经取消了，不进行保留，这个元素之后的元素顺次向前移动当前元素定位之前的位置。2）、相对于当前元素的父对象进行移动，而不是当前元素原来的位置。2、relative：对象不可层叠、不脱离文档流，参考自身静态位置通过top,bottom,left,right定位，并且可以通过z-index进行层次分级1）、不脱离文档流：即当前元素之