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 能够