iMooc-张鑫旭 absolute

absolute

absolute 和 float 关系

相同的特性表现：

• 包裹性：上了属性之后，宽度不在铺满整行，像是变成了 inline-block

• 破坏性：父级高度塌陷

不同的地方：

• float 会脱离文档流，但是宽度会保持，文档流的对象会跟随

• absolute 在没有top等定位属性的情况下，会悬在文档流之上，初始位置还在原来文档流的位置，只不过没了高度和宽度

absolute 和 relative

误区：设置 absolute 不用每次给父级加 relative

• 无依赖，不受 relative 限制，可以不用 left/right/top/bottom 等

• 三个图片并排，如果中间的一个设置成 absolute，那么，中间一个的位置不会变化，同时第三张图片会跑到第二张图片下面

• absolute 脱离文档流无视父级的 overflow: hidden，relative 还在文档流中

配合 margin

• 小 tips : html中标签非要挨着的话可以用<!-- -->连接两个标签

• 利用 margin 把 absolute 用成相对定位

父级加上了 relative

• 爆裂拉伸：left/right/top/bottom 全部为0 可以覆盖父级

• 通常情况，如果父级没有高度，那么子级是不能用百分比的。

  但是！！ absolute + left 可以