11.1 基本概念
11.1.1 定位的类型
- static: 生成正常的元素框
- 块级元素生成矩形框
- 行内元素生成1/多个行框,随父元素流动
- relative: 元素框偏移,但形状与位置不变
- absolute: 元素脱离文档流
- 相对容纳块定位
- 生成的是块级框
- fixed: 同absolute
- 容纳块是视区
- sticky: 触发粘滞条件时,从常规文档流中移除
- 常规文档流中的空间保留
11.1.2 容纳块
对非根元素来说
- position为relative/static时,由最近的块级/行内块级/单元格
- 由
内容边界划定
- 由
- position为absolute时,由position属性不为static的最近祖辈元素确定
- 如果是块级元素,由
内边距边界划定 - 如果是行内元素,由
内容边界划定 - 如果没有祖辈,就是初始容纳块
- 如果是块级元素,由
对于粘滞元素来说
- 由粘滞限定矩形确定
11.2 偏移属性
- 正值是内向偏移,负值是外向偏移
- 百分数相对于容纳块的高度/宽度
11.3 宽度和高度
11.3.1 设置宽度和高度
除了直接设置,height和width也可以从偏移值中推导出来
11.3.2 限制宽度和高度
其值也是相对于容纳块的宽/高
- min-width/min-height
- max-width/max-height
11.4 内容举出和裁剪
11.4.1 溢出Overflow
- visible: 超出元素框的内容可见
- 对元素框的形状没有影响
- scroll: 规范要求,始终渲染滚动条
- hidden: 元素框处裁剪
- auto: 只在需要时滚动,一般用这个还是好一些
11.5 元素的可见性 visibility
注意这个值是可以继承的
- visible: 默认值,可见
- hidden: 不可见,但还占用文档流
- 注意和display:none;的区别
- collapse
11.6 绝对定位
11.6.1 绝对定位元素的容纳块
绝对定位元素的容纳块是position属性的值不为static的最近的祖辈元素.
- 如果文档滚动,绝对定位的元素将随之滚动
11.6.2 绝对定位元素的位置和尺寸
没啥好记得
11.6.3 自动确定边界的位置
静态位置: 元素在常规文档流行中的位置.
如果偏移距离设置为auto
- 除bottom外,边界将会和静态位置对齐
如果设置为0
- 边界和容纳块左边界生命
11.6.4 非置换元素的位置和尺寸
基本规则是,定位元素的maring+border+padding+width要等于容纳块的宽.高度同样的道理
如果left,right,width都为auto时
- 左边界在静态位置
- 元素宽度自动缩放到内容宽度
如果margin为auto,其他有值时
- 会居中显示
如果所有长度都有值,且加起来不足容纳宽宽度
- 则会忽略right属性,让其补足差值
如果只有一个值是auto,且加起来不足容纳块宽度
- 则这个值会自动补足差值
如果过约束了(类似约束不足)
- 横向上的right会被忽略
- 纵向上的bottom会被忽略
11.6.5 置换元素的位置和尺寸
- width如果为auto,则是自身宽度
- 如果left为0,则替换为静态位置
- 如果left/right为auto,且未设置margin,那么margin的auto会设置为0
- 如果显示设置margin为auto,则会居中显示
11.6.7 Z轴上的位置z-index
堆叠次序: 叠放的优选级
- 设置了z-index后,元素便确立了自己的局部堆叠上下文,所有后代元素都相对于它来渲染
- 可以设置为负值
- 子元素不能在父元素的背后绘制
- 即,父元素为1,子元素为-1,照样在父元素上方显示
11.7 固定定位
和绝对定位一样,只是容纳块是视区
11.8 相对定位
除了不脱离文档流以外,最大的区别就是过约束处理
- 相对过约束时,会把right/bottom重置为left/top相反的值
- 如top: 10px; bottom: 20px;最终bottom是-10px.其实就相当于忽略了
11.9 粘滞定位
当元素的边界和粘滞边界接触后,元素会相对于粘滞矩形定位.但是文档流中的位置依然保留.
- 不仅是上边,每条边都可以设置粘滞定位
