CSS:z-index空间位置

来源：互联网发布：linux激活虚拟网卡编辑：程序博客网时间：2024/06/05 16:40

z-index空间位置

当元素被设置了position属性时,可能会使得元素产生重叠，可以利用z-index属性调整元素上下位置，值大的元素位于值小的上方。默认的z-index属性值为0，可以是正数，也可以是负数，当两个元素的值一样时，则保持原有的上下覆盖关系。以下是z-index的属性值：

①auto：默认。堆叠顺序与父元素相等。

②number：设置元素的堆叠顺序。

③inherit：规定应该从父元素继承 z-index 属性的值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）以下是它的实例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">img.x{position: absolute;left: 0px;top: 0px;z-index: -1;}p.y{position: absolute;left: 0px;top: 0px;z-index: 1;}</style></head><body>    <h1>这是一个标题</h1><img src="img/1.jpg" width="500px" class="x" alt=""><p class="y"><b>你看见了没aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</b></p> </body></html>

0 0