css中position位置解决..docVIP

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /title无标题文档/titlescript type=text/javascript src=../js/jquery-1.11.2.js/scriptstyle *{margin:0;padding:0}#idParentDIV{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}/style/headbody div style=height:50px;width:50px;background:#0f0;参考绿/divdiv style=height:50px;width:50px;background:#f00;left:50px;top:50px;移动红/divspanPosition定位：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进行层次分级。/spanhrdiv id=idParentDIVdiv id=idDIV请从下方选择我的b position /b值。/div/divbrselect id=idSel onchange=rdl_change();option value=null---请选择---option value=staticstaticoption value=absoluteabsoluteoption value=relativerelative/selectbr/divscriptfunction 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);???? }}/script/body /html 什么都不选时，默认的文档显示结构 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）、不脱离文档流：即当前元素之前的位置