5.12 CSS属性值含义的多样性

该特性不属于层叠性，不会对属性最终值有影响。

一个CSS属性值可能包含多个含义，例如A属性值的设置影响B属性值的显示效果，例如b:b1在a:a1时是一种显示效果，在a:a2时另一种显示效果。这种特性也经常对开发造成严重困挠，所以单独提出“属性值含义多样性”这个概念进行说明。

ConceptError009错误理解：一个CSS属性值的含义是固定的。

以top属性为例。https://developer.mozilla.org/zh-CN/docs/Web/CSS/top

top的效果取决于元素的position属性：
当position设置为absolute或fixed时，top属性指定了定位元素上外边距边界与其包含块上边界之间的偏移。
当position设置为relative时，top属性指定了元素的上边界离开其正常位置的偏移。
当position设置为sticky时，如果元素在 viewport 里面，top属性的效果和 position 为relative等同；如果元素在 viewport 外面，top属性的效果和 position 为fixed等同。
当position设置为static时，top属性无效。

当position不同属性值（relative、absolute、fixed、sticky），top属性值都有效，但含义不同。详情见“第9章 定位模型”。

只有掌握这些常用的CSS规范规则，才能编写出符合期望效果的代码，才能快速定位问题与解决问题。只有掌握CSS模型，才能理解这些CSS规范规则，才能进行合理设计。

属性值含义多样性的本质

不同需求场景需要不同效果，通过多样性设计满足各种不同需求场景。它的背后是对应各种布局模型。CSS为什么这么设计？如果CSS属性之间不存在上述这种关联关系，编码就不会出现这么多“烦恼”。假如设计成“理想的无关联的CSS属性”，会衍生出一系列其它问题，比如可能要成级数的增加CSS属性个数，比如难以实现复杂页面，只能说没有完美设计。