CSS之定位
为什么使用定位
将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动的上面)
标准流盒子在最底层 -- 浮动盒子在中间层 -- 定位的盒子在最上层
定位详解
定位 = 定位模式 + 边偏移
边偏移
简单说定位的盒子是通过边偏移来移动位置的;
在 css 中,通过 left
,left
,top
,bottom
属性定义元素的边偏移;
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top:80px | 顶端偏移量;定义元素相对于父元素上边线的距离 |
left | left:80px | 左端偏移量;定义元素相对于父元素左边线的距离 |
bottom | bottom:80px | 下端偏移量;元素相对于父元素下边线的距离 |
right | right:80px | 右端偏移量;元素相对于父元素右边线的距离 |
定位盒子有了偏移才有了价值。一般情况下凡是有定位地方必定有边偏移;
定位模式(定位的分类)
在 css 中,通过 position 属性定义元素的定位模式,
选择器 {position: 属性值;}
定位模式是有不同模式的,在不同的情况下,我们用到不同的定位模式
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
静态定位 static
- 静态定位是元素的默认定位方式,无定位的意思,它相当于 border 里面的 none,不要定位的时候用。
- 静态定位 按照标准流特性摆放位置,它没有边偏移;
- 静态定位 在布局时几乎不用;
相对定位 relative
- 相对定位是元素相对于它 原来在标准流中的位置来说;
相对定位的特点
- 相对于自己原来在标准流中位置来移动的;
- 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它;
绝对定位 absolute
绝对定位是元素相对于他父级元素来设置元素的位置
- 完全脱标 -- 完全不占位置;
- 父元素没有定位 ,则以浏览器为准定位;
- 如果父元素没有定位,则以最近的父级元素定位为准。
固定定位 fixed
固定定位是绝对定位的一种特殊形式,如果说绝对定位是一个矩形,那么固定定位就是类似于一个正方形;
- 完全脱标,完全不占有位置;
- 只认浏览器的可视窗口,浏览器可视窗口 + 边偏移属性,来设置元素的位置;
- 跟元素没有任何关系;
- 不随滚动条滚动;
定位的拓展 (position)
绝对定位盒子居中
绝对定位的盒子不能设置 margin:0 auto;实现居中;
- left:50%; 让盒子的左侧移动父级元素的水平中心位置;
- margin-left: -100px;让盒子向左移动自身宽度的一半;
- 实现垂直居中也是如此原理 可以先 top 50% 然后在 margin-top -100px
堆叠顺序 (z-index)
在使用定位布局时,可能出现盒子重叠情况;加了定位的盒子,默认后来者居上,后面的盒子会压住前面的盒子;
z-index 特性如下:
- 属性值:正整数,负整数或0,默认是0,数值越大盒子越靠上;
- 如果属性值相同,则按照书写顺序,后来居上;
- 数字后面不能加单位;
注意:z-index 只能用于相对定位,绝对定位和固定元素上,其他标准流,浮动和静态定位无效
定位改变 display 属性
-
可以用浮动 float 默认转为行内高(类似,并不完全一样,因为浮动是脱标的)
-
绝对定位和固定定位也和浮动类似,默认转换的特性,转换为行内块元素;
一个行内盒子如果加了浮动或者固定定位和绝对定位,不用转换,可以直接给这个盒子设置宽度和高度;
注意:浮动元素、绝对定位元素都不会触发外边距合并的问题,也就是说,给盒子改为浮动或者定位,就不会出现垂直外边距合并的问题了;
侧边栏靠近版心定位
- 先让靠近走整个屏幕的一半, 此时应该在版心的一半; left/right: 50%
- 然后让盒子往右或者左走版心的一半, 其实是靠近版心边缘, 然后再加上自身的位置, 即可靠近版心贴边定位, 不受屏幕大小的影响;margin-left/margin-right: 版心宽度/2 + 自身宽度 + 间距