CSS定位
定位组成
定位:将盒子定在某一个位置,所有定位也是在摆放盒子,按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
1.定位模式
定位模式确定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个:
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对 |
absolute | 绝对 |
fixed | 固定 |
2.边偏移
边偏移就是定位的盒子移动到最终位置,有top、bottom、left和right四个属性
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top:80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | bottom:80px | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | left:80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | right:80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
3.静态定位static
默认定位方式
选择器{
position:static;
}
4.相对定位relative
相对定位是元素在移动位置的时候,是对于它原来的位置来说的
选择器{
position:relative;
}
- 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
- 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
5.绝对定位absolute
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的
选择器{
position:absolute;
}
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
- 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占有原来位置
6.子绝父相:子级使用绝对定位,父级则需要相对定位
7.固定定位fixed
固定定位是元素固定于浏览器可视区的位置,可以在浏览器页面吗滚动时元素的位置不会改变
选择器{
position:fixed;
}
- 以浏览器的可视窗口为参照点移动元素
-
跟父元素没有任何关系
-
不随着滚动条滚动
2.不占有原先的位置
固定在版心右侧位置:
- 让固定定位的盒子left:50%,走到浏览器可视区(也可以看做版心)的一半位置
- 让固定定位的盒子margin-left:版心宽度的一般距离,多走版心宽度的一半位置
8.粘性定位sticky
粘性定位可以被认为是相对定位和固定定位的混合
选择器{
position:sticky;
top:10px;
}
粘性选择器的特点
- 以浏览器的可视窗口为参照点进行移动(固定定位特点)
- 粘性定位占有原来的位置(相对定位特点)
- 必须添加top、bottom、left、right中一个才有效
9.定位总结
10.定位的叠放次序
使用定位布局时,可能会出现盒子重叠的情况,此时,可以使用 z-index 来控制盒子的前后次序
选择器{
z-index:1;
}
- 数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上
- 只有定位的盒子才有 z-index 属性
11.定位的拓展
绝对定位的盒子居中
- left:50%;父容器宽度的一半
- margin-left : 负值 ; 往左边走 自己盒子宽度的一半
绝对定位(固定定位)会完全压住盒子
- 浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字
- 绝对定位(固定定位)会压住盒子