P49-前端基础CSS-元素级别设置z-index 1.概述页面布局过程中,当两个元素重叠时,我们可以通过调整层级设置元素覆盖另一个元素上面。
打开锚点元素时,可以在z-index属性中指定元素的级别
z-index需要整数作为参数。 值越大的要素级别越高,值越高的要素优先显示。 如果元素级别相同,则下面元素的祖先元素级别较高不会复盖后代元素。 2.1 .未调整元素级代码。 doctypehtmlhtmlheadmetacharset=' utf-8 ' title元素的层次/titlestylebody { font-size 336060 px; } .box1 { width: 100px; height: 100px; 背景色: chocolate; 位置: absolute; } .box2 { width: 100px; height: 100px; 背景色:彩色流蓝色; 位置: absolute; top: 50px; left: 50px; } .box3 { width: 100px; height: 100px; 背景色: gold; 位置: absolute; top: 100px; left: 100px; } .box4 { width: 100px; height: 100px; 背景色:绿色黄色; 位置: absolute; top: 50px; left: 50px; }/style/headbodydivclass=' box1'1/divdivclass=' box2'2/divdivclass=' box3'3divclass=' box4'4/div/divclass
3 .调整元素水平展示3.1 .调整box2元素水平覆盖box2
3.2 .调整box2元素水平覆盖box2效应
3.3 )即使祖先元素水平较高,子元素box3也是box4的亲元素。 如果将父元素级别调整为大于box4,则box3也不复盖box4
将盒3级别调整为高于盒4
box3未复盖box4