CSS：再谈position
2016-08-19 本文已影响14人
i7eo
直接上表#
ps:tl指top、left，ab、re指absolute、relative
| 父元素 | 子元素 | 结论 |
|---|---|---|
| absolute | absolute | 子随父的tl偏移 |
| absolute | relative | 子随父的tl偏移 |
| absolute | static | 子随父的tl偏移 |
| relative | absolute | 子随父的tl偏移 |
| relative | relative | 子随父的tl偏移 |
| relative | static | 子随父的tl偏移 |
| static | absolute | 子越过父寻上级父(有ab/re属性值得)直至body的tl偏移 |
| static | relative | 子随父的tl偏移 |
| static | static | 子不随父的tl偏移 |
fixed指相对于浏览器窗口固定布局，所以未在表中显示。fixed一旦设置会随浏览器的上拉下拉而偏移
总结:
1.1 relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式
1.2 对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位。
1.3 定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
1.4 定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。
