css3 transform对其他样式影响,(尤其是position:flixed)

简介: 1、transform 会为当前元素添加 position : relative 特性;当 magin 为负值的时候,就会覆盖到前面的 元素,然而如果给前面元素添加了transform 属性后,前面的元素就会在上面 2、transform 会限制 position:flxed  当一个元素 有 postion :flxed 属性当时候,应该是相对于文档定位然而,当父元素中有 transform 属性的时候,该元素的 postion:flxed 属性就会变成 absolute 。

1、transform 会为当前元素添加 position : relative 特性;

当 magin 为负值的时候,就会覆盖到前面的 元素,

然而如果给前面元素添加了transform 属性后,前面的元素就会在上面

 

2、transform 会限制 position:flxed  

当一个元素 有 postion :flxed 属性当时候,应该是相对于文档定位

然而,当父元素中有 transform 属性的时候,该元素的 postion:flxed 属性就会变成 absolute 。

当引用 iscroll 等框架等时候 ,尤其要注意

 

个人博客 : 很多有用的插件    https://gilea.cn/

 

 https://www.cnblogs.com/jiebba

相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
7天前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
2天前
|
前端开发
css <样式一>
css <样式一>
11 1
|
18天前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
31 6
|
22天前
|
前端开发 JavaScript
|
23天前
|
XML 前端开发 数据格式
CSS常用样式及示例
CSS常用样式及示例
|
29天前
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
|
1月前
|
前端开发
CSS 设置hr样式
【8月更文挑战第9天】
|
20天前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
34 0
|
20天前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
29 0