常州网站制作策划html界面模板

当前位置： 首页 > news >正文

常州网站制作策划,html界面模板,wordpress poedit,邢台做网站哪里便宜原文合集地址如下#xff0c;有需要的朋友可以关注 本文地址 什么是层叠上下文 层叠上下文#xff08;Stacking Context#xff09;是指在 HTML 和 CSS 中#xff0c;用于控制和管理元素层叠顺序以及呈现的一种机制。在一个网页中#xff0c;许多元素#xff08;例如文…原文合集地址如下有需要的朋友可以关注 本文地址 什么是层叠上下文 层叠上下文Stacking Context是指在 HTML 和 CSS 中用于控制和管理元素层叠顺序以及呈现的一种机制。在一个网页中许多元素例如文本、图像、背景等可能会重叠在一起这时候就需要一种方法来决定哪个元素应该显示在前面哪个元素应该显示在后面。 层叠上下文的原则是通过一系列的规则来确定元素的层叠顺序这些规则可以根据元素的属性、内容、位置等来决定。每个层叠上下文都是一个独立的层叠环境元素在不同的层叠上下文中可以相互叠加但不会影响到其他上下文中的元素。 具象的比喻你可以把层叠上下文元素理解为理解为该元素当了官而其他非层叠上下文元素则可以理解为普通群众。凡是“当了官的元素”就比普通元素等级要高也就是说元素在Z轴上更靠上更靠近观察者。 形成层叠上下文的条件 根元素整个文档的根元素通常是 html自动创建一个层叠上下文。定位元素使用相对定位、绝对定位或固定定位的元素会创建一个新的层叠上下文。CSS 属性一些 CSS 属性如 z-index可以用来控制元素的层叠顺序同时创建一个新的层叠上下文。Flex 容器具有 display: flex 或 display: inline-flex 属性的元素的子元素会创建一个新的层叠上下文。Grid 容器具有 display: grid 或 display: inline-grid 属性的元素的子元素会创建一个新的层叠上下文。某些 CSS 伪元素和伪类例如 ::before 和 ::after 伪元素。transform属性不为none的元素opacity属性值小于1的元素filter属性值不为none的元素perspective属性不为none的元素mix-blend-mode属性不为normal的元素isolation属性被设置为isolate的元素will-change属性指定了上面属性的元素webkit-overflow-scrolling属性被设置touch的元素 层叠顺序 层叠顺序(Stacking Order)指的是元素发生层叠时的垂直显示顺序。当元素位置互相重叠时,层叠顺序决定哪一个元素会覆盖在另一个元素的上方。 层叠顺序从后往前依次为: 背景和边框(background和border)负z-index块级盒子(block)浮动盒子(float)行内盒子(inline/inline-block)z-index为0或auto的定位盒子(positioned)正z-index 其中,层叠顺序比较遵循以下原则: z-index大的覆盖z-index小的谁大谁上在同一个层叠上下文领域层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的z-index相同时,层叠顺序在后的覆盖前的后来居上当元素的层叠水平一致、层叠顺序相同的时候在DOM流中处于后面的元素会覆盖前面的元素。层叠顺序最后面的背景和边框总是在最下面 需要注意的是: 层叠顺序只在同一个层叠上下文中有效创建了层叠上下文的元素会显示在普通流元素的上方 就好比两个同职称的人所在等级不一样是没有可比性的。就好比董事长的秘书和什么经理科长的秘书虽然同为秘书那等级一目了然。 举例 例子一 !DOCTYPE html html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylediv {position: relative;width: 100px;height: 100px;}p {position: absolute;font-size: 20px;width: 100px;height: 100px;}.a {background-color: blue;z-index: 1;}.b {background-color: green;z-index: 2;top: 20px;left: 20px;}.c {background-color: red;z-index: 3;top: -20px;left: 40px;}/style/headbodydivp classaa/pp classbb/p/divdivp classcc/p/div/body /html 两个 元素都创建了自己的层叠上下文。div的默认position是static但是内部的 元素的position被设置为absolute因此它们可以定位。p.a、p.b和p.c都位于各自的div内并且应用了不同的z-index和定位属性。p.c元素的z-index最高所以它在层叠顺序中位于最上面即使它位于第二个div内它仍然会覆盖在第一个div内的元素上面。 p.b元素位于第一个div内因此它在第一个div内的p.a元素上面并且由于p.b的定位它距离div的左上角有20px的偏移。p.a元素位于第一个div内因此它位于底部被p.b和p.c元素所覆盖。最终p.c元素在最上面呈现为红色p.b元素在中间呈现为绿色而p.a元素在底部呈现为蓝色。 例子二 !DOCTYPE html html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylediv {width: 100px;height: 100px;position: relative;}.box1 {z-index: 2;}.box2 {z-index: 1;}p {position: absolute;font-size: 20px;width: 100px;height: 100px;}.a {background-color: blue;z-index: 100;}.b {background-color: green;top: 20px;left: 20px;z-index: 200;}.c {background-color: red;top: -20px;left: 40px;text-align: right;z-index: 9999;}/style/headbodydiv classbox1p classaa/pp classbb/p/divdiv classbox2p classcc/p/div/body /html解析: div.box1和div.box2作为两个块级元素,层叠顺序按照代码顺序,div.box1在下方。p标签都是绝对定位的,所以按照z-index的值排序。p.c的z-index最大,在最上方显示。p.b的z-index其次,显示在p.c下方。p.a的z-index最小,但在div.box1内部,所以显示在div和p.b之上。div.box1作为父级元素,始终在最下方,作为背景和边框显示。 所以最终展示的层叠顺序从下到上应该是: div.box1 p.b p.c p.a 符合层叠顺序的规定,z-index大的在上层,相同z-index按代码顺序层叠。 例子三· z-index: ‘auto’ !DOCTYPE html html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headstyle.box1,.box2 {position: relative;z-index: auto;}.child1 {width: 200px;height: 100px;background: #168bf5;position: absolute;top: 0;left: 0;z-index: 2;}.child2 {width: 100px;height: 200px;background: #32c292;position: absolute;top: 0;left: 0;z-index: 1;}/stylebodydiv classbox1div classchild1child1/div/divdiv classbox2div classchild2child2/div/div/body /html解析: div.box1 和 div.box2 都是正常的块级元素,没有开启层叠上下文,根据代码顺序,div.box1 在下方。div.child1 和 div.child2 都是绝对定位的,所以会开启层叠上下文,不会被父元素的层叠顺序影响。div.child1 的 z-index 值更大,所以会显示在 div.child2 的上方。最后,普通流的 div.box1 和 div.box2 会显示在 创建了层叠上下文的 div.child1 和 div.child2下方。 所以根据层叠顺序的规则,上述显示顺序从下到上为: div.box1 - div.box2 - div.child2 - div.child1 将 .box1,.box2的z-index设置为数值0效果就不一样了 .box1,.box2 {position: relative;z-index: 0}解析: div.box1和div.box2由于有z-index,创建了层叠上下文,会显示在普通流元素上方。div.box1层叠上下文内,div.child2的z-index是1,显示在div.box1下方。div.box2层叠上下文内,div.child1的z-index是2,显示在div.box2下方。两个层叠上下文,div.box1在下方,div.box2在上方。 所以层叠顺序从下到上是: div.box1 - div.child2 - div.box2 - div.child1 这个例子体现了层叠上下文的独立性,以及z-index对层叠顺序的影响。 例子四 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.parent {width: 200px;height: 100px;background: #168bf5;/* 虽然设置了z-index但是没有设置positionz-index无效.parent还是普通元素没有产生层叠上下文 /z-index: 1;}.child {width: 100px;height: 200px;background: #32d19c;position: relative;z-index: -1;}/style/headbodydiv classboxdiv classparentparentdiv classchildchild/div/div/div/body /html解析: div.box作为父容器,没有开启层叠上下文,作为背景显示。div.parent没有开启层叠上下文,是一个普通流块级元素,根据代码顺序在div.box之上。div.child是绝对定位的,z-index为-1,会创建层叠上下文,所以显示在普通流的div.parent之上。即使div.parent设置了z-index为1,但没有position,所以z-index无效,div.parent不会创建层叠上下文。如果div.box设置成flex布局,也会创建层叠上下文,层叠顺序就会改变。 综合以上分析,层叠顺序从下到上为: div.box - div.parent - div.child 这个例子展示了层叠上下文的形成条件,以及z-index的生效条件。 将父容器设置成flex布局 效果如下 .box {display: flex;/ 此项设置会影响z-index */}解析: div.child仍然是定位元素,创建了层叠上下文,显示在最上方。div.box作为弹性容器,根据规范会创建层叠上下文,并显示在普通流元素div.parent之上。即使div.parent设置了z-index,但没有position定位,所以z-index无效。div.parent作为普通流元素,显示在最下方。 综上,层叠顺序从上到下为: div.child - div.box - div.parent 这个例子展示了弹性容器也会创建层叠上下文,从而影响内部元素的层叠顺序。 所以理解哪些属性会创建层叠上下文非常重要,这决定了元素的显示堆叠顺序。