Home

你是否在使用定位时，会遇到一个定位元素即使设置更高的层级，也无法将另一个定位元素覆盖的情况？通过理解层叠上下文，你就能更好的构建你的应用。 理解渲染流程和层叠顺序 当浏览器将 HTML 解析成 DOM 结构时，它同样会创建另一个树结构 - 渲染树。经过它渲染之后就成了用户所看到的视图，它同样决定了浏览器绘制 HTML 元素的顺序。这个顺序很重要，因为越是后面渲染的元素，它的显示顺序就越靠前，也就可能会覆盖前面的元素。 在没有定位的情况下， 这个渲染顺序是由 HTML 元素的顺序决定的，例如有以下 HTML 结构： <div>one</div> <div>two</div> <div>three</div> ...

BFC(Block Formatting Context)的特点是元素拥有独立的渲染区域,元素内部的内容(边距,浮动元素等)不会影响到外部元素。 哪些情况下会触发BFC 设置 overflow 属性,值不为 visible 设置 float 属性,值不为 none 设置 position 属性,值为 absolute 或 fixed 设置 display 属性,值为 inline-block, table-cell, table-caption, flex, inline-flex, grid 或者 inline-grid BFC 的典型应用场景: 解决块级元素的塌陷问题(Collapsing) 块级元素的垂直塌陷: 当两个相邻的块级元素拥有上下方向相...