在 will-change:transform 之后保持溢出:隐藏行为

2024-04-06

我有一个父元素和一个子元素:

.parent {
  will-change: transform;
  overflow: hidden;
  position: absolute;
}

.child {
  position: fixed;
  top: 80px;
  left: 80px;
}

without will-change:transform style, .child元素无论父元素的位置如何overflow:hidden将基于窗口定位。
现在既然.parent不仅有这种风格top and left of .child计算自.parent, 但是也overflow:hidden适用于.child too.
看起来position:fixed如果我们添加将被完全忽略will-change:transform
看看这里:https://jsbin.com/beluweroti/1/edit?html,css,输出 https://jsbin.com/beluweroti/1/edit?html,css,output

Note:我不添加这种风格.parent,所以我不能简单地删除它。

我可以处理定位,并设置正确left and top,但问题是
我怎么能忽视overflow:hidden对于固定位置的孩子?


From 规格 https://drafts.csswg.org/css-will-change/#will-change:

如果属性的任何非初始值都会导致元素为固定定位的元素生成包含块,指定 will-change 中的属性必须导致元素为固定定位元素生成包含块

所以基本上你面临的是转换问题,而不是意志改变问题,因为:

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.ref https://www.w3.org/TR/css-transforms-1/#transform-rendering

因此,变换正在为固定位置元素创建一个包含块,并且will-change应该做同样的事情,因为.parent现在是固定元素的包含块,它也会对其应用溢出。

如果您无法删除,基本上您什么也做不了will-change属性或更改其值.parent

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 will-change:transform 之后保持溢出:隐藏行为 的相关文章

  • 如何实现右边缘倾斜的 div? [复制]

    这个问题在这里已经有答案了 我几天来一直在寻找使 div 的右边缘倾斜 45 度的代码 这是我特别想要得到的图像示例 似乎有很多 倾斜边缘 div 的示例 但我找不到任何具有特定右侧倾斜的示例 我花了很多时间试图改变其他人的代码 但结果却一
  • 响应式 CSS 图像锚点标签 - 图像地图样式

    我一直在开发一个响应式网站 并且在图像映射方面遇到了一些问题 图像映射似乎不适用于基于百分比的坐标 经过一番谷歌搜索后 我发现了一个 JS 解决方法 http mattstow com experiment responsive image
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • 没有嵌套容器的桌面和移动 Flexbox 布局

    我有 3 个 div 它们必须按移动布局的特定顺序排列 但我必须将第 2 个 div 作为桌面布局的侧边栏 所以对于移动设备 分区1 分区2 分区3 对于桌面 分区1 div2 分区3 在桌面布局中 div 2 有阴影背景 因此必须是父级的
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • React Native 上的文本缩进

    我需要缩进 React Native 段落的第一行 但使用常见的csstext indent财产 textIndent 与 React Native 不兼容 伪元素选择器也不兼容 例如 first line 有什么方法可以做到这一点而不用将
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • 使用溢出时无法隐藏滚动条:auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 如何使用 javascript 或 jquery 生成 CSS 路径?

    关于如何生成元素的 CSS 路径有什么建议吗 CSS 路径是识别特定元素所需的 css 选择器的路径 例如 如果我的 html 是 div div class bar ul li 1 li li 2 li li span class sel
  • 我可以在 CSS 类名中使用驼峰命名法吗

    我想命名一个 CSS 类并调用它imgSuper 我可以在 CSS 类中使用驼峰命名法吗 从技术上讲是可以的 但这是有风险的 因为虽然 CSS 语法大多不区分大小写 但在某些浏览器中 在某些条件下 类名被视为区分大小写 因为规范没有指定浏览
  • 删除数据表列中的额外填充

    你好 我创建了 JQuery DataTables 如下所示 所以我的问题是如何删除 图片 列中过多的填充 这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a
  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息?

  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba
  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • 如何在没有@import的情况下减少@import?

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch

随机推荐

  • 当属性名称为参数时如何查询属性值?

    通常我们可以查询属性值 例如 Match n Product where n name iPhone X return n 但是 就我而言 我不知道应该匹配哪个属性 但我只知道值 在这种情况下属性名称就变成了一种变量 我想要这样的东西 Ma
  • 如何收到 wifi 网络状态变化的通知?

    我正在编写一个通过 wifi 连接到 telnet 服务器的应用程序 我有一个管理套接字连接的服务 一切正常 但当手机休眠时 它会断开 wifi 无线电 这会导致套接字连接中断 并抛出 SocketException 我觉得我应该能够设置一
  • 如何在 Windows 中使用命令提示符创建多个空文件

    我正在开发一个项目 需要创建多个空文件 过去 我使用过 touch 命令 但这只能让我一次创建一个文件 有没有办法在 Windows 中使用命令提示符创建多个空文件 我感谢您提出的任何建议或解决方案 谢谢你 A FOR循环将允许您创建任意数
  • alias_method 和 class_methods 不能混合使用吗?

    我一直在尝试修补全局缓存模块 但我不明白为什么这不起作用 有没有人有什么建议 这是错误 NameError undefined method get for module Cache from irb 21 in alias method
  • 使用 Dataset API 在 Tensorflow 中批量滑动窗口

    有没有办法修改一批图像的组成 目前 当我创建例如大小为 4 的批次 我的批次将如下所示 Batch1 Img0 Img1 Img2 Img3 第2批 Img4 Img5 Img6 Img7 我需要修改批次的组成 以便它只会转移到下一个图像一
  • 运行 .net 应用程序而不安装 .net 客户端配置文件?

    我在framework 4 0中构建了一个c net应用程序 我不反对为客户端的电脑安装 net 但是在客户端安装它太大了 这不可能有一些小的安装程序或redist包吗 安装并有助于轻松运行 net 应用程序 因为仅为小型应用程序安装完整的
  • 在 Go 中不睡眠的情况下测试异步结果

    我的代码中有相当多的组件具有持久的 go 例程 用于侦听事件以触发操作 大多数时候 他们没有理由 除了测试之外 在完成该操作后发回通知 但是 我的单元测试正在使用 sleep 来等待这些异步任务完成 Send notification ev
  • JUnit 4 与 TestNG - 更新 2013 - 2014 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 JUnit 4 和 TestNG 曾经具有可比性 这两个测试框架有何优缺点 我今天比较了 TestNG 和 JUnit4 以我有限的测试框架经验
  • 将区间表示法解析为 Guava Range

    我需要将包含标准间隔表示法 即 8 100 6 10 等 的字符串解析为 Guava Range 对象 我将如何在 Java 中做到这一点 是否有一个实用程序包可以将字符串解析为构建 Guava Range 对象所需的组件 如果我们看一下这
  • 无法读取未定义的属性“native-element”

    我用的是离子2 我需要获取 HTML 元素值 其实我用的是viewchild 这是我的html模板代码 div class messagesholder last callFunction div p class chat date cha
  • 检索已排序的可手动实例内的隐藏标头

    使用时手动表 http handsontable com 似乎很难从上下文菜单中检索行的标题 考虑以下数据源 var data function return 1212 roman i ii iii 3121 numeric 1 2 3 4
  • 在 JavaScript 中覆盖对象的括号 [index] getter/setter?

    我目前正在构建一个双向链表 http en wikipedia org wiki Doubly linked list执行 我正在尝试 或希望 做的是使用 setter getter 来设置列表中的元素 就像在数组中一样 var index
  • 如何使 svg 元素(例如矩形)scrollIntoView?

    我在图形面板中有一个 svg svg 中的所有节点都在另一个面板中列出 我希望通过单击节点列表中的节点 svg 可以滚动到该节点 每个节点都是一个矩形 但我发现只有上边框在视图中 而节点的其余部分仍然在视图之外 有什么办法可以解决这个问题吗
  • 有人有使用 Python Zeep 和 Mock 对 SOAP API 进行单元测试的示例吗?

    我正在构建一个使用 Python zeep 访问第三方 SOAP API 的 Python 应用程序 我想使用模拟响应来实现一些单元测试 因为我并不总是有一个实时服务器来运行我的测试 我是单元测试的新手 不太确定从哪里开始 我见过使用模拟与
  • Java 因实现访问权限较弱的接口方法而出现错误

    当我编译这段代码时 interface Rideable String getGait public class Camel implements Rideable int x 2 public static void main Strin
  • 在codeigniter中上传doc和docx文件

    大家好 我在 codeigniter 中上传 doc 和 docx 文件时遇到麻烦 我检查了 config mime php 中的 mime 类型 谁能告诉我有什么问题吗 以下是我的 mime php 文件 doc gt applicati
  • Fabric js 或 imagick 从图像中删除白色

    我遇到了这种情况 我很难在谷歌上搜索并解释 我们公司在铝上打印照片 我们为客户提供两种选择 第一个选择是将他们的照片打印在铝上 就像 他们把照片给了我们 所以如果照片有白色 背景 图片以白色背景打印 简单的 像那样 第二个选项是我们可以打印
  • CSS3 FlexBox 过渡

    在这个 codepen 示例中 http codepen io DrYSG pen ovctn http codepen io DrYSG pen ovctn我创建了三个弹性盒 我想要的效果是 当鼠标悬停在中间框上时 它的尺寸会增大 演示中
  • 允许 Discord Rewrite 机器人响应其他机器人

    我有一个 Discord 机器人和一个用于 Discord 频道的 Webhook 设置 用于每小时准时发送一条命令 然而 Discord Rewrite 默认情况下似乎会忽略从其他机器人发送的命令 我该如何禁用此功能 我是否需要修改每个命
  • 在 will-change:transform 之后保持溢出:隐藏行为

    我有一个父元素和一个子元素 parent will change transform overflow hidden position absolute child position fixed top 80px left 80px wit