【内容】
1.定位
将盒子定在某一个位置,自由的漂浮在其他盒子的上面。CSS离不开定位。
记忆法:
标准流在最底层(海底),浮动的盒子在中间层(海面),定位的盒子在最上层(天空)。
2.定位组成
定位也是用来布局的,有两部分组成:
定位=定位模式+边偏移。
(1)边偏移
我们定位的盒子,是通过边偏移来移动位置的。
在CSS中,通过top、bottom、left和right属性定义元素的边偏移,具体如下:
边偏移属性 |
示例 |
描述 |
top |
top: 80px; |
顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom |
bottom: 80px; |
底部偏移量,定义元素相对于其父元素下边线的距离 |
left |
left: 80px; |
左侧偏移量,定义元素相对于其父元素左边线的距离 |
right |
right: 80px; |
右侧偏移量,定义元素相对于其父元素右边线的距离 |
说明:
定位的盒子有了边偏移才有价值,一般情况下,凡是有定位地方必定有边偏移。
(2)定位模式(position)
在CSS中,通过position属性定义元素的定位模式,语法如下:
选择器 { position: 属性值; }
定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式:
值 |
语义 |
static |
静态定位 |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定位 |
1)静态定位
是元素的默认定位方式,无定位的意思,相当于border里面的none,不要定位的时候用。
换句话说,静态定位就是按照标准流特性摆放位置,没有边偏移。
2)相对定位(自恋型)
相对定位是元素相对于它原来在标准流中的位置来说的。
相对定位的特点:
相对于自己原来在标准流中位置来移动的。
原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
3)绝对定位(拼爹型)
是元素以带有定位的父级元素来移动位置。
特点:
—完全脱标:完全不占位置。
—父元素没有定位,则以浏览器为准定位(Document文档)。
—父元素有定位,将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
定位口诀:
子绝父相—子级(不占位置)是绝对定位,父级(占用位置)要用相对定位。
4)固定定位(认死理型)
是绝对定位的一种特殊形式,如果说绝对定位是一个矩形,那固定定位就类似于正方形。
特点:
—完全脱标:完全不占位置。
—只认浏览器的可视窗口:浏览器可视窗口+边偏移属性 来设置元素的位置。
—跟父元素没有任何关系。
—不随滚动条滚动。
3.绝对定位的盒子居中
在使用绝对定位时想要实现水平居中,可以按照以下的方法实现:
(1)left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。
(2)margin-left: -100px; 让盒子向左移动自身宽度的一半。
举例:
div {
position: absolute;
left: 50%; /* 走父亲宽度的一半 */
margin-left: -100px; /* 向左走自己宽度的一半 */
width: 200px;
height: 200px;
}
注意:
绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中。
4.堆叠顺序(z-index)
在使用定位布局时,可能会出现盒子重叠的情况。加了定位的盒子,默认后来者居上,后面的盒子会压住前面的盒子。
应用z-index层叠等级属性可以调整盒子的堆叠顺序,z-index的特性如下:
(1)属性值:正整数、负整数或0,默认值是0,数值越大,盒子越靠上。
(2)如果属性值相同,则按照书写顺序,后来居上。
举例:
.damao {
z-index: 2;
}
.ermao {
z-index: 1;
...;
}
效果:damao在ermao上面。
5.定位小结
定位模式 |
是否脱标占有位置 |
移动位置基准 |
模式转换(行内块) |
使用情况 |
静态static |
不脱标,正常模式 |
正常模式 |
不能 |
几乎不用 |
相对定位relative |
不脱标,占有位置 |
相对自身位置移动 |
不能 |
基本单独使用 |
绝对定位absolute |
完全脱标,不占有位置 |
相对于定位父级移动位置 |
能 |
要和定位父级元素搭配使用 |
固定定位fixed |
完全脱标,不占有位置 |
相对于浏览器移动位置 |
能 |
单独使用,不需要父级 |
注意:
边偏移需要和定位模式联合使用,单独使用无效;
top和bottom不要同时使用;
left和right不要同时使用。
7.网页布局
一个完整的网页,有标准流、浮动、定位,一起完成布局的,每个都有自己的专门用法。
标准流:
可以让盒子上下排列或者左右排列的。
浮动:
可以让多个块级元素一行显示,或者左右对齐盒子、浮动的盒子就是按照顺序左右排列。
定位:
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示,但是每个盒子需要测量数值。