黑马程序员技术交流社区

标题: 定位 [打印本页]

---

作者: 王智超    时间: 2019-6-8 21:10
标题: 定位
2、定位模式

常见的定位模式分为：相对定位、绝对定位、固定定位

定位属性

定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;

相对定位：position:relative;

参照物：自己本身原来的位置，进行位置的偏移；

位置偏移：通过改变方位名词（top/bottom/left/right）的值来设置；

特点：相对于自己原来的位置为参照物进行位移，属于占位定位，盒子仍然在标准流里面；

绝对定位：position:absolute;

注意:绝对定位完全脱离了文档流；

参照物：默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位；

情况1：父级没有定位的时候以浏览器为参照物；

情况2：父级盒子有定位的时候，参照物就是父级元素；

绝对定位的参照物选定

绝对定位的参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照物；

绝对定位的特点

绝对定位是完全脱离了标准流不占位的，参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照定位；

子绝父相的应用

子绝父相：子级绝对，父级相对，父级盒子做了相对定位定位了，但是依然占位，不会影响其他盒子的布局；

注意：其实实际工作中不一定是子绝父相，其实只要父级有了定位属性，子级就会以父级为参照，但是一般用的最多的还是子绝父相；

固定定位： position:fixed;

• 参照物：电脑屏幕（可视窗口）；

• 注意：固定定位完全脱离了标准流，参照物是可视窗口为准，和父级没任何关系，IE6不支持固定定位，但是我们现在不用管它，直接使用就可以；

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2