· 定位就是将盒子定在某个位置。定位=定位模式+边偏移。所谓的定位模式,决定元素的定位方式。通过CSS的position属性来设置,他的值可以分为四种:静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。所谓的边偏移即定位了盒子移动到最终的位置,有top、bottom、left和right四个属性。分别具有以下含义:
边偏移属性 | 实例 | 描述 |
top | top:50px; | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | bottom:50px; | 底端偏移量,定义元素相对于其父元素下边线的距离 |
left | left:50px; | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | right:50px; | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
静态定位
静态定位就是默认定位方式,无定位的意思。语法如下:
选择器{position:static};
静态定位按照标准流特性摆放位置,没有边偏移。而且在设计过程中很少用到静态定位。
相对定位
相对定位就是元素移动的时候,相对于原来的位置来说的(俗称自恋型定位);语法如下;
选择器{ position:relative; }
其特点:
1)是相对于自己原来的位置来移动的(移动的时候参照自己原来的位置)
2)原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待他(不脱标,继续保持原来的位置)。
绝对定位
绝对定位是元素在移动位置的时候,相对于祖先元素(有爹拼爹,没有爹拼爷爷,没有祖先则以浏览器为准)来说的(俗称拼爹型)。
语法格式:
选择器{ position:absolute; }
绝对定位的特点:
1)、如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(也就是document文档)。
2)、如果祖先元素没有因为(相对、绝对、固定),则以最近一级有定位祖先元素为参考点移动位置。
3)、绝对定位不再占有原先的位置。(脱标)
关于子绝父相
子绝父相(子级使用绝对定位,父级使用相对定位)。
1)子级绝对定位,不会占有位置,可以放到父盒子里面任何一个位置,不会影响其他兄弟盒子
2)父盒子需要定位限制子盒子在父盒子内显示
3)父盒子布局是,需要占有位置,因此父亲只能是相对定位。
相对定位经常用来作为绝对定位的父级。因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位,当然子绝父相也不是绝对的,如果父元素不需要占有位置,子绝父绝也会遇到的。
固定定位
固定定位是元素固定在浏览器可视区域位置,主要应用场景是页面滚动时元素的位置不会改变。语法如下:
选择器{ position:fixed; }
定位的特点:(务必记住)
1.以浏览器的可视窗口为参照点移动元素跟父元素没有任何关系,不随滚动条移动
2.固定定位不在占有原先的位置
固定定位也是脱标的,其实固定定位也可以看做是一种特殊的地绝对定位。固定定位的小技巧:固定在版心右侧位置:
/*设置盒子的大小*/ .box { width: 800px; height: 1000px; background-color: #8bd3af; margin: auto; } .circlefix { /*设置固定定位*/ position: fixed; left: 50%;/*设置定位的盒子走到浏览器可视区的一半位置*/ margin-left: 400px;/*在设置margin-left多走版心宽度的一半*/ top: 450px; width: 80px; height: 100px; background-color: #5e6662; }
效果如下:
粘性定位
可以认为是相对定位和固定定位的混合:语法如下:
选择器{ position:sticky; top:10px; }
粘性定位的特点
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加top、left、 right、 bottom其中一个才有效
定位的总结
定位的总结 定位模式 是否脱标 移动位置 是否常用 static 否 不能使用边偏移 很少 relative 否(占有位置) 相对于自身位置移动 常用 absolute 是(不占有位置) 带有定位的父级 常用 fixed 是(不占有位置) 浏览器可视区 常用 sticky 否(占有位置) 浏览器可视区 当前阶段使用
1.一定记佳住相对定位、固定定位绝对定位两个大的特点: 1).是否占有位置(脱标否)2)以谁为基准点移
动位置
2. 学习定位重点学会子绝父相
定位拓展
绝对定位的居中算法
left:50%;/*left走50%,父容器宽度的一半*/ margin-left:-自身宽度 /*margin 赋值,向左移动自身宽度的一半*/