个人中心
gpt4 book ai didi

css - 为什么在父级上应用 CSS 过滤器会破坏子级定位？

转载 作者：行者123 更新时间：2023-11-28 03:06:29 24 4
gpt4 key购买 nike

所以我有这个标题屏幕“动画”，其标题位于全屏页面的中心，当您向下滚动时，它会变小并保留在页面顶部。这是一个具有预期行为的工作示例，我从中删除了所有不必要的代码以使其最小化:

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
    
    if (windowS < windowH-header) {
        $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform", "translateY(0)");
        $("#inside, #content").css({
            "position": "static",
            "margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed",
            "margin-top": -windowH+header
        });
        $("#content").css("margin-top", windowH);
    }
  
    $("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});
.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both;
}
#inside {
    width: 100%;
    height: 100vh;
    background-color: lightcoral;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header {
    height: 90px;
    top: 0;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
#title {
    width: 100%;
    color: #fff;
    transform: scale(2);
}
#content {
    height: 1000px;
    background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>  
    <div class="wrapper">
        <div id="inside">
            <div id="header">
                <h1 id="title">Title</h1>
            </div>
        </div>
    <div id="content"></div>
</body>

接下来是完全相同的代码片段，但添加了一个内容:我应用了一个过滤器，就我而言，这纯粹是装饰性的:filter: Brightness(1.3);。

如下所示，当您滚动“动画”一半时，标题就会消失。当您检查该元素时，它仍然具有其所有属性，但不知何故它已经消失了。这在 Firefox 和 Chrome 中是一样的，我不知道为什么。如果有人可以发布应用了过滤器的工作片段并解释为什么它之前不起作用，我将不胜感激。

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
    
    if (windowS < windowH-header) {
        $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform", "translateY(0)");
        $("#inside, #content").css({
            "position": "static",
            "margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed",
            "margin-top": -windowH+header
        });
        $("#content").css("margin-top", windowH);
    }
  
    $("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});
.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both;
}
#inside {
    width: 100%;
    height: 100vh;
    background-color: lightcoral;
    filter: brightness(1.3);        /*<<<<<<<<<<<<<<<<*/
    display: flex;
    align-items: center;
    justify-content: center;
}
#header {
    height: 90px;
    top: 0;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
#title {
    width: 100%;
    color: #fff;
    transform: scale(2);
}
#content {
    height: 1000px;
    background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>  
    <div class="wrapper">
        <div id="inside">
            <div id="header">
                <h1 id="title">Title</h1>
            </div>
        </div>
    <div id="content"></div>
</body>

最佳答案

如果我们引用the specification我们可以读到:

A value other than none for the filter property results in thecreation of a containing block for absolute and fixed positioneddescendants unless the element it applies to is a document rootelement in the current browsing context. The list of functions areapplied in the order provided.

这意味着您的 position:fixed 元素将相对于过滤后的容器定位，而不再是视口(viewport)。换句话说，它仍然是固定的，但位于其新包含 block (过滤容器)内

这是说明该问题的简化版本:

.container {
  display: inline-block;
  width: 200px;
  height: 200vh;
  border: 1px solid;
}

.container>div {
  position: fixed;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
}
<div class="container">
  <div>I am fixed on scroll</div>
</div>

<div class="container" style="filter:grayscale(1);">
  <div>I move with the scroll</div>
</div>

要解决此问题，请尝试将过滤器移动到固定元素而不是其容器:

.container {
  display: inline-block;
  width: 200px;
  height: 200vh;
  border: 1px solid;
}

.container>div {
  position: fixed;
  width: 100px;
  height: 100px;
  background: red;
  color: #fff;
  filter: grayscale(1);
}
<div class="container">
  <div>I am fixed on scroll</div>
</div>

<小时/>

这里是一个非详尽的1属性列表，导致为绝对和固定定位的后代创建包含 block

  • 过滤器
  • 转换 ref
  • 背景过滤器 ref
  • 视角 ref
  • 包含 ref
  • 容器 ref
  • 变换样式 ref
  • 内容可见性 ref
  • will-change 当与上述值之一一起使用时

If any non-initial value of a property would cause the element to generate a containing block for absolutely positioned elements, specifying that property in will-change must cause the element to generate a containing block for absolutely positioned elements. ref


1:我会尽力使此列表保持最新。

关于css - 为什么在父级上应用 CSS 过滤器会破坏子级定位？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60566396/

24 4 0
文章推荐： javascript - 路径和向其传递 Prop 的问题(带有 map 的组件)
文章推荐： javascript - Highstock 堆叠条形图， slider 覆盖在图表上
文章推荐： javascript - 在一个函数中获取数组对象的属性 React
文章推荐： javascript - 从 React.js 中的递归渲染组件更新状态
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com