A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[学习交流] 定位

© 王智超 初级黑马   /  2019-6-8 21:10  /  576 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

2、定位模式
常见的定位模式分为:相对定位、绝对定位、固定定位
定位属性
定位属性:position 取值不同实现的效果不同,如下:
静态定位position:static;
相对定位position:relative;
绝对定位position:absolute;
固定定位position:fixed;
相对定位:position:relative;
参照物:自己本身原来的位置,进行位置的偏移;
位置偏移:通过改变方位名词(top/bottom/left/right)的值来设置;
特点:相对于自己原来的位置为参照物进行位移,属于占位定位,盒子仍然在标准流里面;
绝对定位:position:absolute;
注意:绝对定位完全脱离了文档流;
参照物:默认情况下是自己的父级盒子,但是如果绝对定位的父级盒子没有任何定位属性,参照物就以浏览器为参照去进行定位;
情况1父级没有定位的时候以浏览器为参照物;
情况2父级盒子有定位的时候,参照物就是父级元素;
绝对定位的参照物选定
绝对定位的参照物默认以父级为主,如果父级没有定位一层一层往上找,如果找不到定位的祖先盒子就以浏览器为参照物;
绝对定位的特点
绝对定位是完全脱离了标准流不占位的,参照物默认以父级为主,如果父级没有定位一层一层往上找,如果找不到定位的祖先盒子就以浏览器为参照定位;
子绝父相的应用
子绝父相:子级绝对,父级相对,父级盒子做了相对定位定位了,但是依然占位,不会影响其他盒子的布局;
注意:其实实际工作中不一定是子绝父相,其实只要父级有了定位属性,子级就会以父级为参照,但是一般用的最多的还是子绝父相;
固定定位: position:fixed;
参照物:电脑屏幕(可视窗口);
注意:固定定位完全脱离了标准流,参照物是可视窗口为准,和父级没任何关系,IE6不支持固定定位,但是我们现在不用管它,直接使用就可以;

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马