发布网友 发布时间:2022-04-23 19:38
共4个回答
懂视网 时间:2022-04-06 17:11
z-index属性设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,如果想要让后面的元素优先级更高,你可以使用z-index属性来设置。下面我们就来具体看看如何使用CSS中的z-index属性?
z-index描述如下。
z-index:value ;
值以整数形式输入,数字较大的值显示在前面。
要使用z-index,必须将static(初始值)以外的值应用于position属性中的元素。
输入auto时,将设置与父元素相同的值。如果未在父元素中指定z-index,则值为0。(初始值)
我们来具体看一个示例
代码如下:
将z-index应用于以下html。
HTML代码
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <link rel=”stylesheet” href=”sample.css” type=”text/css”> </head> <body> <img src="img/girl.jpg" class="content1"> <img src="img/flower.jpg" class="content2"> </body> </html>
首先,它是未指定z-index的状态。
CSS代码
sample.css
img.content1{position:absolute; top:50px; left:150px; } img.content2{position:absolute; top:300px; left:100px; }
上述代码中上传了img文件夹下的两张图片girl.jpg和flower.jpg,根据position属性它们有一部分重叠在了一起
在没有设定z-index属性的最初状态下,后面设置的flower.jpg在girl.jpg前面显示,如图所示
接下来我们来设置z-index属性的值,将girl.jpg的z-index的值设置为2,将flower.jpg的z-index的值设置为1。
CSS代码
img.content1{position:absolute; top:100px; left:100px; z-index: 2; } img.content2{position:absolute; top:200px; left:200px; z-index: 1; }
运行结果
在浏览器上显示如下所示的效果,由于girl.jpg被优先考虑,因此它显示在flower.jpg的前面。
最后,我们来看一下添加文本文字的示例
代码如下
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel=”stylesheet” href=”sample.css” type=”text/css”> </head> <body> <p>这是添加的文字</p> <img src="img/girl.jpg" class="content1"> <img src="img/flower.jpg" class="content2"> </body> </html>
CSS代码
p {font-size: 20px; color:#ffffff; position:absolute; top:200px; left:200px; z-index: 3;} img.content1{position:absolute; top:100px; left:100px; z-index: 2; } img.content2{position:absolute; top:200px; left:200px; z-index: 1; }
因为段落的文字是最开始被设置的,所以本来不能显示在图像上,但是通过将z-index的值设为3就会在最前面显示。
效果如下
热心网友 时间:2022-04-06 14:19
当网页上出现多个由绝对定位(POSITION:absolute)或固定定位(POSITION:fixed)所产生的浮动层时,必然就会产生一个问题,就是当这些层的位置产生重合时,谁在谁的上面呢?或者说谁看得见、谁看不见呢?这时候就可以通过设置z-index的值来解决,这个值较大的就在上面,较小的在下面。热心网友 时间:2022-04-06 15:37
CSS中的z-index属性定义一个元素在文档中的层叠顺序https://www.apiref.com/css-zh/properties/positioning/z-index.htm
z-index用于确定元素在当前层叠上下文中的层叠级别,并确定该元素是否创建新的局部层叠上下文。
每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定(每个元素仅属于一个层叠上下文)。
同一个层叠上下文中,层叠级别大的显示在上面,反之显示在下面。
同一个层叠上下文中,层叠级别相同的两个元素,依据它们在HTML文档流中的顺序,写在后面的将会覆盖前面的。
不同层叠上下文中,元素的显示顺序依据祖先的层叠级别来决定,与自身的层叠级别无关。
当z-index未定义或者值为auto时,在IE6,7下会创建新的局部层叠上下文,而在高级浏览器中,按照规范不产生新的局部层叠上下文
热心网友 时间:2022-04-06 17:12
如果不用,默认的情况是后面的元素叠在前面的元素上面,但是有时候需要将前面的元素一直保持在最上面,这时候就需要用到z-index了,那么就把前面的z-index设的比后面的大,明白了吗?