CSS定位中Positoin、absolute、Relative的一些研究-巨人网络通讯

主页 > 知识库 > CSS定位中Positoin、absolute、Relative的一些研究

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

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的说明请参考手册：https://www.jb51.net/shouce/css/index.html
　　辛苦了半天得出的结论，希望对大家有用。如果有疏忽之处，还请指正。

您可能感兴趣的文章:

javascript css styleFloat和cssFloat
javascript css float属性的特殊写法
css 跨浏览器实现float:center
CSS中Float（浮动）相关技巧文章
javascript下操作css的float属性的特殊写法
css position: absolute、relative详解
relative absolute无法冲破的等级问题解决
Div CSS absolute与relative的区别小结
position:relative/absolute无法冲破的等级
解决rs.absolutepage=-1的问题
详细分析css float 属性以及position:absolute 的区别

标签：邵阳广安混显沧州贵州贺州鹤壁莱芜

巨人网络通讯声明：本文标题《CSS定位中Positoin、absolute、Relative的一些研究》，本文关键词 CSS,定位,中,Positoin,absolute,；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。