CSS定位中Positoin、absolute、Relative的一些研究(css 定位)

编辑：rootadmin

Positoin属性有四个值： static、fixed、absolute和relative，后面两个在布局中的定位里是经常用到的，顾名思义，absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。ralative是指相对定位，就是依据left，right，top，bottom等属性在正常文档流中偏移位置。　　但是，怎么个绝对法，又怎么个相对法呢？以前我一直没有仔细去研究它，到具体应用时有时会有点迷糊，我相信很多朋友也会有这样的问题。今天我特意测试了一下，得出了以下结论： 1、当Positoin属性值为Relative时对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置 Top的值表示对象相对原位置向下偏移的距离 bottom的值表示对象相对原位置向上偏移的距离两者同时存在时，只有Top起作用。 left的值表示对象相对原位置向右偏移的距离 right的值表示对象相对原位置向左偏移的距离两者同时存在时，只有left起作用。 2、当Positoin属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来 Top的值表示对象上边框与浏览器窗口顶部的距离 bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。 left的值表示对象左边框与浏览器窗口左边的距离 right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。　　在Positoin属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一视同仁，^_^）的Positoin属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。　　更多有关CSS的说明请参考手册：　　辛苦了半天得出的结论，希望对大家有用。如果有疏忽之处，还请指正。

推荐整理分享CSS定位中Positoin、absolute、Relative的一些研究(css 定位)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css_selector定位,css定位的几种方式,css定位技术,css定位中常用的选择器包括,css定位技术,定位css中的position,css定位position的定位有哪些,有那么特点?,定位css中的position,内容如对您有帮助，希望把文章链接给更多的朋友！

脚本控制三行三列自适应高度DIV布局的代码 !DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.Transitional//EN""

word-wrap在firefox中不起作用的解决方法完整的css代码为word-wrap:break-word;overflow:hidden;这段代码应添加到td标签的样式中。另外，应该在外层的table标签中添加样式table-layout:fixed;

网页设计者需要了解的_网页字体大小数据参考 PointsPixelsEmsPercent6pt8px0.5em%7pt9px0.em%7.5ptpx0.em.5%8ptpx0.7em%9ptpx0.em%ptpx0.8em%.5ptpx0.em.5%ptpx0.em%ptpx1em%ptpx1.em%.5ptp