CSS box-shadow z-index bug All In One

CSS box-shadow z-index bug All In One

z-index

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

z-index CSS 属性设置定位元素及其后代或弹性项目的 z 顺序。具有较大 z-index 的重叠元素覆盖那些具有较小 z-index 的元素。

当前堆叠上下文中框的堆叠级别。
盒子是否建立了局部堆叠上下文。

z-index order & positioned

box-shadow

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

box-shadow CSS 属性在元素的框架周围添加阴影效果。您可以设置多个以逗号分隔的效果。框阴影由相对于元素的 X 和 Y 偏移、模糊和扩散半径以及颜色来描述。

CSS3 box-shadow : 4 sides symmetry

z-index & box-shadow

https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

https://developer.mozilla.org/en-US/docs/Web/CSS/position

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---