CSS 三种定位
1. 定位(position)
将盒子定在某一个位置,自由的置顶在其他盒子的上面
定位 = 定位模式 + 边偏移
三种布局机制的上下顺序:
布局机制 | 顺序 |
---|---|
定位 | 上层 |
浮动 | 中层 |
标准流 | 底层 |
2. 边偏移
定位的盒子,是通过边偏移来移动位置的
属性 | 描述 |
---|---|
top | 顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离。 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
3. 定位模式
语法:选择器 { position: 属性值; }
属性 | 语义 |
---|---|
static | 无定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
(1) 无定位(static)
元素的默认无定位,不要定位的时候用
(2) 相对定位(relative)
- 原来在标准流中占的位置不变
- 相对于自己原来在标准流中位置来移动
(3)绝对定位(absolute)
- 完全脱离标准流不占位置
- 绝对定位是根据带有定位的父级盒子来移动位置
- 元素依据最近的有定位的父元素(祖先)进行定位,以它为基准
- 如果父元素(祖先)都没有定位,则以浏览器边缘为准
定位口诀 —— 子绝父相
通常父盒子用相对定位,子盒子用绝对定位
(4)固定定位(fixed)
是绝对定位的一种特殊形式
- 完全脱离标准流不占位置
- 定位只认浏览器的可视窗口 + 边偏移
注意:跟父元素没有任何关系,单独使用的,不随滚动条滚动
4. 定位的扩展
(1)绝对定位的盒子居中
第一步:让盒子的左侧移动到父级元素的水平中心位置
第二步:让盒子向左移动自身宽度的一半
例:left: 50%; margin: -100px;
(2)堆叠顺序(z-index)
只应用在定位(相对、绝对、固定)布局中,调整盒子的堆叠优先级
默认优先级:按书写顺序后来居上
语法:z-index: 数值;
(无单位)
注意:
- 数值越大,盒子堆叠排序越靠上
- 如果属性值相同,按书写顺序后来居上
(3)定位改变 display 属性
可以改变类似行内块显示模式有以下方式:
display: inline-block
转换为行内块- 设置浮动 float 默认转换为脱标的行内块
- 设置绝对(固定)定位默认转换为定位的行内块
总结:行内的盒子,如果加了浮动或绝对(固定)定位,不用 display 就可以设置宽高等
注意:浮动、(绝对、固定)定位的元素都不会触发垂直外边距合并问题
5. 定位总结
定位模式 | 是否占有置 | 移动位置基准 | 可改显示模式 | 使用情况 |
---|---|---|---|---|
相对定位relative | 占有位置 | 相对自身位置移动 | 不能 | 单独使用 |
绝对定位absolute | 不占有位置 | 相对于定位父级移动位置 | 能 | 和定位父级元素搭配使用 |
固定定位fixed | 不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用 |
注意:
- 边偏移必须在定位模式下搭配使用,单独使用无效
top
和bottom
不要同时使用left
和right
不要同时使用
© 版权声明
文章版权归作者所有,未经允许请勿转载。
文章版权归作者所有,未经允许请勿转载。
THE END