首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

高性能Web动画和渲染原理系列(5)合成层的生成条件和陷阱

;"> 三个div盒子堆叠在一起,可以看到它们都绘制在同一个层上(这里的层并不与RenderLayer对应,毕竟它只是一个中间态的树结构): ?...此时如果为最底下的红色矩形添加transform:translateZ(0)属性将其提升为合成层后,为了保证正确的堆叠关系,蓝色和绿色的矩形就会被提升为合成层,代码如下: <div style="transform...从上图中的细节信息中可以看到,提升的原因是layerFotSquashingContent,也就是为了保证堆叠顺序的正确,用一个单独的合成层来将受到影响的元素收集在一起,既保证堆叠顺序,也避免在期望之外生成过多的合成层...如果调整绿色矩形的位置,就可以看到,当视觉上不存在覆盖时,它就不需要提升了: ? BUT!!!...例如使用left和top来实现位置动画时,绝对定位的元素会形成RenderLayer,但是却不符合提升为CompositingLayer的条件,所以动画元素就会和Document处在同一个合成层里,持续进行的动画就会导致

1.1K10

CSS定位

position: static; left: 500px; top: 500px; } 相对定位 相对定位是相对自己的标准流的位置进行定位移动 position:relative; 特性: 1....一般用于微调元素和配合绝对定位来实现效果 绝对定位 position:absolute; 特性: 1.移动的出发点: 从绝对元素开始一直往上级找(直到找到最大的html标签),在这个过程中,...(不论块级还是行内) 1.4.margin:auto对于脱标元素不起作用 2.移动的出发点:浏览器窗口 (直接表现:滚动条对于固定元素没有作用) 四种定位总结 定位模式 是否脱标占有位置 是否可以使用边偏移...移动位置基准 静态static 不脱标正常模式 不可以 正常模式 相对定位relative 不脱标占有位置 可以 相对自身位置移动 绝对定位absolute 完全脱标,不占有位置 可以 相对于定位的父级移动位置

99140

关于定位position的相关知识

设置绝对定位的元素,会脱离文档流,如下例子 <!...假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。...fixed的定位方式 fixed可定位相对于浏览器窗口的指定坐标.这个元素的位置可通过left、right、top、bottom属性来规定。不论窗口滚动与否,元素都会留在那个位置。...而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性 z-index z-index设置元素的堆叠顺序,值可以为负。...拥有最高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。z-index只能针对同级的标签有效,也就是说子标签的z-index值对于父标签是无效的,因为两者的级别不同z-index是无法比较的。

91550

前端Demo|页面布局|适合学习前端一个月的同学

id="block1">区域一 区域二 区域三 相对位置 当position...绝对定位的属性是 absolute,相较之于相对定位,它的改变在于当对象发生位移时,原先的初始位置如同被挖去了一样。...固定定位属性: position: fixed; 固定定位和绝对定位的性质是一样的,它们所定义的框的位置是独立于其他页面内容之外的。...这样,有时候它们难免会叠加在一起,这种情况可以使用 Z轴属性,即层的叠加特性来改变它们的顺序。...position: relative; 绝对定位:相对于上一级对象的初始位置发生位移 position: absolute; 固定定位:独立于其他页面内容外,将页面位置固定不动(不随滚动条和页面一起移动

76510

CSS样式

奔驰 奥迪 ul li{ color:green; } 子代选择器:选择所有作为E元素的直接子元素F,对更深一层的元素不起作用...fixed 固定定位 其中,绝对定位和固定定位会脱离文档流 设置定位之后:可以使用四个方向值进行调整位置:left、top、right、bottom 相对定位,改变位置的参照物是自己原来的位置,不脱标...绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位)如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位 固定定位永远都会相对于浏览器窗口进行定位...,固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动 z-index属性设置元素的堆叠顺序。...拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 CSS3新特性 border-radius 属性,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角

23830

创意卡片式项目管理界面UI设计源码

该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该项目图片会全屏放大,向下滚动鼠标可以看到该项目的介绍信息。...每一个项目都包含一个表示项目标题的div.cd-title元素和一个表示项目信息的div.cd-project-info元素。项目的图片被设置为.cd-title::before伪元素的背景图片。...-- 额外的项目信息 --> <!...每一个单独的项目都使用绝对定位,并设置100%的高度和放置在它们父容器.cd-project-info的左上角位置。开始它们是堆叠在一起的。...translateY(100%); } 对于.cd-project-info(项目信息),它有100%的高度,一个overflow: auto属性(使其可以滚动),它被放置在父元素.single-project的左上角位置

1.6K20

弹指间,网页灰飞烟灭——Google灭霸彩蛋实现

模板代码如下: 啪嗒!...一、实现原理 简单来说就是将页面的元素先转化为canvas,然后提取出所有的像素点分别按照规律排布在32个canvas上面,,再将这些canvas转换为和原始元素大小一样的dom元素堆叠在一起,看起来就和原始元素一样的...最后将这些堆叠在一起的元素散开,就形成“沙化”的效果。 二、实现步骤 首先引入 html2canvas 插件。...目前所有的零散元素是聚集在一起的,我们只需要有规律的让他们动起来,动到一定位置后再让它们不可见,感觉就像沙化的效果一般。...// 让所有的canvas动起来 // 原始dom相对定位,container绝对定位 ele.classList.add('disintegrated'); ele.appendChild(container

58140

前端基础-CSS定位

一、定位(重点) 定位的使用: ​ 1.4种定位方式:静态、相对、绝对、固定 ​ 2.4种边偏移属性:left、right、top、bottom 注意:偏移值准确的理解是“距离什么位置有多少像素” 。...),可以定义宽高,不占据标准流的空间 ​ 3.margin:auto对于设置过绝对定位的元素不起作用 ​ 4.设置方向偏移的时候,横向或者纵向只设置一个即可,设置多个没有意义 使用场景:配合相对定位使用..." /> 总结:父元素使用相对定位(不脱离标准流,写多个不会覆盖),子元素绝对定位(相对于父盒子的位置) —父相子绝...总结: ​ 1.会脱离文档流,不占据标准流的空间 ​ 2.不继承父元素的宽高,需要给自身定义宽高 ​ 3.margin:auto对固定定位的元素不起作用 ​ 4.不会随着滚动条滚动,永远固定在浏览器窗口中的位置...绝对定位absolute 完全脱标,不占有位置 可以 相对于定位的父级移动位置 固定定位fixed 完全脱标,不占有位置 可以 相对于浏览器移动位置 5.定位元素的层叠效果 控制“定位”元素的叠放层级

61220

CSS入门指南-3:定位元素

静态定位下,每个元素在处在常规文档流中,它们都是块级元素,所以会在页面中自上而下地堆叠。 相对定位(relative) 现在我把第三段的 position 属性设置为 relative。...可以看到,第三段原来的位置被回收了。这说明绝对定位的元素脱离了常规文档流,它现在是相对于顶级元素 body 在定位。...这里内部和外部的 div 都是是静态定位,不存在谁是谁的定位上下文这个问题,所以 top 和 left 属性并没有生效。 下面我们把内部 div 设定为绝对定位,来看一下变化。...外部 div 改为相对定位之后,后代中绝对定位的元素就会按照 top 和 left 属性的设定,相对于外部 div 定位。此时内部 div的 top 和 left 属性参照的就是外部 div。...块级元素:比如段落、标题、列表等,在浏览器中上下堆叠显示。 行内元素:比如 a、span、和 img,在浏览器中左右并排显示,只有前一行没有空间时才会显示对下一行。

62810

CSS 中重要的层叠概念

,y 为垂直位置,z 为屏幕由内向外方向的位置,我们在看屏幕的时候是沿着 z 轴方向从外向内的;由此,元素在用户视角就形成了层叠的关系,某个元素可能覆盖了其他元素也可能被其他元素覆盖; 那么这里有几个重要的概念...:层叠上下文 (堆叠上下文, Stacking Context)、层叠等级 (层叠水平, Stacking Level)、层叠顺序(层叠次序, 堆叠顺序, Stacking Order)、z-index...在 CSS2.1 规范中,每个元素的位置是三维的,当元素发生层叠,这时它可能覆盖了其他元素或者被其他元素覆盖;排在 z 轴越靠上的位置,距离屏幕观察者越近 可以想象一张桌子,上面有一堆物品,这张桌子就代表着一个层叠上下文...所以如果你遇到 z-index 值设了很大,但是不起作用的话,就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。 4....下.green后加一个绝对定位的 span.gold,设置z-index: -1,那么它将位于红绿蓝的下面; 这个例子中,红蓝绿黄元素的父元素中都没有生成新的层叠上下文,都属于根层叠上下文中的元素 红蓝都没有设置

77830

回炉重造,css常规布局系统整理——实战开发后复盘小结

div.static { position: static; border: 3px solid #73AD21; top: 50px; /*演示:这句话不起作用,可删去*/ left: 10px...; /*演示:这句话不起作用,可删去*/ } 1.1.2 fixed定位方式# ​ 固定定位,元素的位置相对于浏览器(就是你能看到的这个浏览器窗口)来说,是固定的,无论你怎么滑动窗口,它都在那儿雷打不动...,原来的位置依然是存在的(通常里面会包上absolute绝对定位来用)。...absolute定位方式# ​ 绝对定位,根据外面一层包着的元素来定位(relative),左啊还是右啊,如果外面没有那就是html元素,最大的那个咯。...浮动的元素,脱离文档流(比如正常我们放一个div在页面里,是有一个文档流的,就是会有位置的,而变为float定位后,就会漂浮起来,原来的位置就不占用了,再放其他div,会从忽略float的位置,正常排列

2.2K20

CSS 中重要的层叠概念

,y为垂直位置,z为屏幕由内向外方向的位置,我们在看屏幕的时候是沿着z轴方向从外向内的;由此,元素在用户视角就形成了层叠的关系,某个元素可能覆盖了其他元素也可能被其他元素覆盖; ?...那么这里有几个重要的概念:层叠上下文 (堆叠上下文, Stacking Context)、层叠等级 (层叠水平, Stacking Level)、层叠顺序 (层叠次序, 堆叠顺序, Stacking Order...在CSS2.1规范中,每个元素的位置是三维的,当元素发生层叠,这时它可能覆盖了其他元素或者被其他元素覆盖;排在z轴越靠上的位置,距离屏幕观察者越近 文章有一个很好的比喻...所以如果你遇到 z-index 值设了很大,但是不起作用的话,就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。 4....下.green后加一个绝对定位的 span.gold,设置z-index: -1,那么它将位于红绿蓝的下面; 参见Codepen - 设置了z-index 这个例子中,红蓝绿黄元素的父元素中都没有生成新的层叠上下文

73520

CSS 中重要的层叠概念

,y为垂直位置,z为屏幕由内向外方向的位置,我们在看屏幕的时候是沿着z轴方向从外向内的;由此,元素在用户视角就形成了层叠的关系,某个元素可能覆盖了其他元素也可能被其他元素覆盖; ?...那么这里有几个重要的概念:层叠上下文 (堆叠上下文, Stacking Context)、层叠等级 (层叠水平, Stacking Level)、层叠顺序 (层叠次序, 堆叠顺序, Stacking Order...在CSS2.1规范中,每个元素的位置是三维的,当元素发生层叠,这时它可能覆盖了其他元素或者被其他元素覆盖;排在z轴越靠上的位置,距离屏幕观察者越近 文章有一个很好的比喻...所以如果你遇到 z-index 值设了很大,但是不起作用的话,就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。 4....下 .green后加一个绝对定位的 span.gold,设置 z-index:-1,那么它将位于红绿蓝的下面; 参见Codepen - 设置了z-index 这个例子中,红蓝绿黄元素的父元素中都没有生成新的层叠上下文

64930
领券