如何避免带filter的元素覆盖带float的元素？

当给蓝色块级元素添加filter属性时，该元素会创建一个新的堆叠上下文。浮动元素的默认堆叠层级低于拥有独立堆叠上下文的元素，因此蓝色块会覆盖在红色浮动元素上方，打破了原本的层级关系。

以下几种方法都可以解决这个问题：

• 提升红色浮动元素的堆叠层级
  给红色浮动元素添加position: relative和z-index（值只需大于蓝色元素的默认层级即可，比如设为1），让它的层级高于蓝色元素：

  <div style="width: 5em; height: 5em; background: red; float: right; position: relative; z-index: 1;"></div>
  <div style="height: 2em; background: blue; filter: brightness(0.8);"></div>
  

• 降低蓝色元素的堆叠层级
  给蓝色元素添加position: relative和z-index: -1，让它的层级低于红色浮动元素：

  <div style="width: 5em; height: 5em; background: red; float: right;"></div>
  <div style="height: 2em; background: blue; filter: brightness(0.8); position: relative; z-index: -1;"></div>
  

  注意：如果蓝色元素的父容器设置了overflow: hidden，这种方法可能导致蓝色元素被父容器裁剪，需要根据实际场景调整。

• 给红色浮动元素也创建堆叠上下文
  给红色元素添加一个不影响视觉的filter属性（比如filter: opacity(1)），让它和蓝色元素处于同级堆叠上下文，由于红色元素在DOM中顺序靠前，会自然显示在蓝色元素上方：

  <div style="width: 5em; height: 5em; background: red; float: right; filter: opacity(1);"></div>
  <div style="height: 2em; background: blue; filter: brightness(0.8);"></div>
  

内容的提问来源于stack exchange，提问作者Brandon