首页
学习
活动
专区
工具
TVP
发布

CSS样式更改——裁剪、Z-Index、清除、改变元素的特性

前言 上篇文章主要介绍了CSS样式更改篇中的框模型、定位、浮动、溢出基础知识,这篇文章主要分享CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识,一起来看看吧。...对元素某块区域就行剪切 img{ clip:rect(23px,14px,45px,54px) } rect (top, right, bottom, left) 设置元素的形状 auto 不应用任何剪裁 2.Z-Index...设置元素的堆叠顺序 div{ z-index:1 } p{ z-index:10 } a{ z-index:-1 } z-index 值越大,所在的元素越靠前显示 3.清除Clear 专门用来清除浮动...元素会作为一个表格标题显示(类似 ) 此时的块级元素div就有了内联元素的特性了 参考文档:W3C官方文档(CSS篇) 总结 这篇文章主要介绍了CSS样式更改篇中的裁剪、Z-Index...、清除、改变元素的特性,希望让大家对CSS样式有个简单的认识和了解。

2K20
您找到你想要的搜索结果了吗?
是的
没有找到

CSS理解之z-index

1.z-index基础 z-index属性指定了元素及其子元素的[z顺序],而[z顺序]可以决定 当元素发生覆盖的时候,哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个。...z-index支持的属性值: 1. z-index:auto;默认值,如果不对z-index设置,默认为auto; 2. z-index:;整数值,z-index:1,z-index:...2等 3. z-index:inherit;继承 z-index基本特性: 1....Paste_Image.png 当第一个图片元素的祖先元素z-index值为auto时,祖先优先原则就会失效,z-index:auto可以看成是z-index:0,尽管第二个图片元素的祖先元素z-index...7.z-index与其它CSS属性层叠上下文(非定位元素层叠上下文和z-index关系) 1.不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别(不支持z-index的层叠上下文

1.4K40

深入理解z-index

注意,此处的c坐标并不是z-index。下图中的坐标名有误,z应该是c。 ?...就好像在现实生活中,我们把两张卡片叠在一起,它们会有上下之分,但是看起来两张卡片的大小并不会有所改变(因为它们足够薄且小)。会产生近大远小现象的应该是z坐标,学过一点空间几何的人都应该熟悉。...为0或者auto 具有正的z-index的,且position值不是static(非正常流中)的子box的Stacking Context,且z-index数值越小,其c坐标越小 你需要注意到的是,z-index...由于#b1具有正的z-index,而#b2具有负的z-index,所以#b1被组合到了#b2的上面。...你可以试着把#b1的z-index改成-2,那么它就变成了第二类的box(和#b2一样),又因为它的z-index比#b2来得小,所以它会被组合到#b2之后。

94920

调整 z-index,优化动画性能

所以现在我们的目的就转变成了:如何合理设置元素的 z-index,减少同级元素之间的影响。...暂时不对 z-index 做处理 3. 结合上文中会触发复合层生成条件 4. 除去页面上因为动画暂时还没有出现的元素。...由进度条容器导致的两个复合层,其实只需要把父元素 – 进度条容器的 z-index 提高,就能解决同级复合层影响的问题。...06.png 07.gif 其他 上面是分析了页面上的第一个出现的动画,有木有发现,复合层的出现很像 js 的冒泡过程,而我们要做的就是尽可能的阻止动画的“冒泡”。...z-index 越高的元素,它做动画时所波及的元素越少。在与flash、canvas还有video无关的页面上,总结一下原则: 1. 动画元素的 z-index 要高于同级无动画元素 2.

1.7K30

掌握CSS中的z-index

前言 z-index是一个用于控制文档中图层顺序的属性。具有较高z-index值的元素将会出现在具有较低值的元素之上。...人们通常视图通过设置一个巨大的数字来强制改变层叠顺序,比如说设置z-index: 9999 ,但这样做没有任何效果。如果在项目中看到这样的z-index值,那就属于坏代码。我们要尽量避免这种行为。...按照这种思路可以写成如下格式: Header: z-index: 5 Main: z-index: 4 Box 1: z-index: 4.6 Box 2: z-index: 4.1 Box 3: z-index...z-index策略 让我们用我在项目中应用z-index的一个简单策略来总结一下。...以前,我们使用个位数递增来设置z-index值,但如果你想在两个设置了z-index: 3和z-index: 4 的元素之间添加一个新的元素,你该怎么办?你必须同时改变更多的值。

72830

前端学习笔记之Z-index详解

随后,我们会谈一些关于层叠的内容,以更好地理解在z-index的背后到底发生了什么。 ---- z-index 基础 我相信你一定对三维坐标空间很熟悉。...如果你只看层叠等级2, 6, 7(那些提到了z-index的等级),很有可能你会发现这和你对于z-index的理解相符。...正z-index值比0 z-index值更高一层,0 z-index值又比负z-index值高一层。 尽管这也很有可能是我们大部分人停止思考关于这些层叠层的地方。...事实上,我们真正得到的是如下结果: .one — z-index = 10 .two — z-index = 10.100 .three — z-index = 10.150 .four — z-index...希望这些例子能帮助你厘清为什么有时一个有着较大z-index值的元素却显示在只有较小z-index值的元素的后面。 ---- 结论 当你初次遇到z-index时,它就像一个非常简单、易于理解的属性。

93850

CSS:你真的会用 z-index 吗?

你真的会用 z-index 么? 如果你的 css 里面存在大量这样的代码 z-index:66、666、999、9999 可能你还不太理解 z-index ? ? 2....但“z 轴”顺序,不完全由 z-index 决定,在层叠比较复杂的 HTML 元素上使用 z-index 时,结果可能让人觉得困惑,甚至不可思议。这是由复杂的元素排布规则导致的。 ? 2.1....不含 z-index 元素如何堆叠?...2.3. z-index 如何影响堆叠? z-index 属性指定了一个具有定位属性的元素及其子代元素的 z-order。...最佳实践(不犯二准则) 对于非浮层元素,避免设置 z-index 值,z-index 值没有任何道理需要超过2,原因是: 定位元素一旦设置了 z-index 值,就从普通定位元素变成了层叠上下文元素,

89010

【CSS】207-深入理解z-index

注意,此处的c坐标并不是z-index。下图中的坐标名有误,z应该是c。 ?...就好像在现实生活中,我们把两张卡片叠在一起,它们会有上下之分,但是看起来两张卡片的大小并不会有所改变(因为它们足够薄且小)。会产生近大远小现象的应该是z坐标,学过一点空间几何的人都应该熟悉。...为0或者auto 具有正的z-index的,且position值不是static(非正常流中)的子box的Stacking Context,且z-index数值越小,其c坐标越小 你需要注意到的是,z-index...由于#b1具有正的z-index,而#b2具有负的z-index,所以#b1被组合到了#b2的上面。...你可以试着把#b1的z-index改成-2,那么它就变成了第二类的box(和#b2一样),又因为它的z-index比#b2来得小,所以它会被组合到#b2之后。

69020

CSS深入理解学习笔记之z-index

1、z-index基础   z-index含义:指定了元素及其子元素的”z顺序“,而”z顺序“可以决定元素的覆盖顺序。z-index值越大越在上面。   ...5、z-index与层叠上下文   ⑴ 从层叠顺序上讲,定位元素默认z-index:auto可以看成是z-index:0,但是从层叠上下文来讲,两者却有着本质的差异;   ⑵ z-index不为auto...z-index与创建层叠上下文:z-index不是auto的情况下,元素会创建层叠上下文。(IE8+)   z-index受限于层叠上下文:父元素z-index为数值的情况下,会优先展现层叠顺序。...7、z-index与其他属性层叠上下文   不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别: ?   依赖z-index的层叠上下文的层叠顺序却决于z-index值。...8、z-index相关实践分享   最小化影响原则: ?   不犯二准则: ?   组件层级计数器: ?   通过JS获得body下子元素的最大z-index值。

87850

解决 webpack 打包后 z-index 重新计算的问题

开发时候遇到了一个问题,webpack 打包后 css 的 z-index 值与原始值不符,导致 iframe 里面的 toast 被外面 z-index 较小的 dialog 覆盖。...更改 toast 的 z-index,发现没起作用,页面上的 z-index 依然是之前的值,而不是 css 中赋予的值。给 z-index 加上 !...比如 element-ui 下 的 popup-manager.js 中首先设置 zIndex 为 2000,然后在 openModal 的时候动态添加 css 到 DOM 中,并且改变 zIndex...于是仿照 element-ui 的做法,把 z-index 相关的 css 用 js 动态插入到 DOM 中,就完美地解决了这个问题,并且没有对其它项目产生影响。...// 改变 toast 的 z-index (function addToastStyle () { let nod = document.createElement('style')

54020

关于 z-index,你可能一直存在误区

、内联的、非定位的子元素 Z-index 为 0:设置了 z-index 为 0 的、定位的子元素以及由它所产生的层叠上下文 Z-Index 为正数 :设置了 z-index 为正数的、定位的子元素以及由它所产生的层叠上下文...如果只着眼于层叠等级二、六和七(也就是涉及到 z-index 的等级),那么大部分时候,我们对于 z-index 的理解是正确的。...由于 div.two 位于 div.one 中,所以它的 z-index 是和 div.one 的层叠上下文相关的,也就是说,实际表现出来的 z-index 是下面这样的: .one —— z-index...= 10 .two —— z-index = 10.100 .three —— z-index = 10.150 .four —— z-index = 50 div.one 和内部包含的一切将会在层级上低于...我也曾经被 z-index 这么坑过一两次。我们都曾疑惑一个问题,为什么一个 z-index 非常大的元素,在层级上始终无法超过一个 z-index 比它小很多的元素?

1K10

一篇文章带你了解css z-index(重叠顺序)

div cssz-index层重叠顺序 div层、span层等html标签层重叠顺序样式z-index,平时CSS使用较少,但也会难免会碰到CSS z-index使用。...从基础语法到应用案例教程讲解学习z-index。 一、z-index语法与结构 z-index 跟具体数字 div{ z-index:100 } 注意:z-index的数值不跟单位。...z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数)。 二、z-index使用条件 z-index在使用绝对定位 position:absolute属性条件下使用才能使用。...Div css5-1 盒子背景为黑色, z-index:10 Div css5-2 盒子背景为红色, z-index:20 Divcss5-3盒子背景为蓝色 , z-index:15 为可以看见第一个盒子...z-index:10,所以重叠在最下层,而第二个盒子z-index:20,值最大所以最上层重叠,第三个盒子设置z-index:15,居中。

78730
领券