一.定位
- 定位的组成
定位 = 定位模式 + 边偏移
定位: 将盒子定在某一个位置(定位就是摆盒子 按照定位方式移动盒子)
定位模式: 指一个元素在文档中的定位方式
边偏移: 决定该元素的最终位置
- 定位模式
定位模式决定元素的定位方式 通过 css 的 position 属性设置
1). static 静态定位
静态定位是元素默认定位方式 无定位的意思
语法:
选择器 { position : static ; }
特点:
❶. 静态定位按照标准流特性摆放位置 它没有边偏移
❷. 静态定位布局不常用
2). relative 相对定位
相对定位是元素在移动位置时 相对于它原来的位置来说
语法:
选择器 { position : relative ; }
特点:
❶. 移动位置时参照自己原来的位置移动
❷. 不脱标 继续保留原来的位置
3). absolute 绝对定位
绝对定位是相对于父级元素来移动
语法:
选择器 { position : absolute ; }
特点:
❶. 如果没有父级元素或父元素没有定位 则以浏览器为准进行定位
❷. 如果父级元素有定位 (相对 绝对 固定) 则以最近一级且有定位的父级元素为参考点移动位置
❸. 绝对定位不再占有原来的位置 (脱标)
4). fixed 固定定位
固定定位是元素固定于浏览器可视窗口的位置
使用场景: 浏览器页面滚动时元素的位置不会改变
语法:
选择器 { position : fixed ; }
特点:
❶. 以浏览器的可视窗口为参照物移动
Ⅰ. 跟父级元素没有任何关系
Ⅱ. 不随滚动条滚动
❷. 固定定位不占有原来的位置 (脱标)
- 边偏移
边偏移就是定位盒子移动到最终位置
有 top bottom left right 4个属性
二. 定位拓展
- 子绝父相
含义: 子级元素是绝对定位的话 父级元素要用相对定位
注意:
❶. 子级元素绝对定位 不会占有位置 可以放到父级元素里面任何一个地方 不会影响其他兄弟元素
❷. 父级元素需要加相对定位限制子级元素在父级元素内显示
❸. 父级元素布局时 需要占有位置 因此父级元素只能是相对定位
总结:因为父级元素需要占有位置 因此是相对定位 子级元素不需要占有位置 则是绝对定位
- 固定定位小技巧
❶. 固定在版心右侧位置
思路:
Ⅰ. 让固定定位的盒子 left : 50% 移动到浏览器可视窗口 (也可以看做版心) 的一半位置
Ⅱ. 让固定定位盒子 margin - left : 版心宽度的一半 (多移动版心宽度的一半距离)
这样就可以让固定定位的盒子贴着版心右侧对齐了
- 粘性定位 sticky
粘性定位是相对定位和固定定位的混合
语法:
选择器 { position : sticky ; top : 10px ; }
特点:
❶. 以浏览器的可视窗口为参照点移动元素 (固定定位特点)
❷. 粘性定位占有原先的位置 (相对定位特点)
❸. 必须添加 top bottom left right 其中的一个才有效
- 定位叠级次序 z - index
在使用定位布局时 如出现盒子重叠的情况 此时 可以使用 z - index 来控制盒子的前后次序 ( z 表示 z轴)
语法:
选择器 { z - index : 1 ; }
特点:
❶. 数值可以是正整数 负整数或0 默认值是 auto 数值越大 盒子越靠上
❷. 如果属性相同 则按照书写顺序 后来居上
❸. 数字后面不能加单位
❹. 只有定位的盒子才有 z - index 属性
- 绝对定位的盒子居中
添加了绝对定位的盒子不能使用 margin : 0 auto ; 水平居中
解决方法:
❶. left : 50% (让盒子向左侧移动到父级元素的水平中心位置)
❷. margin - left : 盒子宽度一半 (让盒子向左移动自身宽度的一半)
垂直居中同理 将 left 改成 top 即可
三.定位特殊性
❷. 行内元素添加绝对或固定定位 可以直接设置宽高
❷. 块级元素添加绝对或固定定位 如不给宽高 则默认大小为内容大小
❸. 脱标盒子不会触发外边距塌陷
❹. 绝对 (固定) 定位会压住标准流的使用内容
注意: 浮动元素不会压住标准流的文字 只会压住标准流盒子
