position: fixed;样式层级调整

当一个元素使用了 `position: fixed` 样式时，它会脱离文档流并保持在相对于浏览器窗口的固定位置，不会随着页面滚动而移动。

如果有多个元素都使用了 `position: fixed` 样式，那么它们的层级关系由它们在 HTML 中的先后顺序决定。后面的元素会覆盖在前面的元素之上。如果需要调整它们的层级关系，可以使用 `z-index` 属性。

例如，设置一个 `z-index` 值较高的元素会在屏幕上显示在其他元素的上方，可以这样写：

.element1 {
  position: fixed;
  z-index: 1;
}

.element2 {
  position: fixed;
  z-index: 2;
}

在这个例子中，`.element2` 会显示在 `.element1` 的上方。需要注意的是，`z-index` 属性只对使用了 `position` 属性的元素生效。

相关问题

canvas { display: block; position: fixed; top: 0; right: 0; z-index: -1; }

这是一个 CSS 样式代码，用于设置一个 canvas 元素的位置和层级。具体解释如下：

- `display: block;` 表示将元素设置为块级元素，使其占据一行。
- `position: fixed;` 表示将元素的定位方式设置为固定定位，即相对于浏览器窗口固定位置，不随滚动条滚动而改变位置。
- `top: 0;` 表示将元素的顶部与浏览器窗口的顶部对齐。
- `right: 0;` 表示将元素的右侧与浏览器窗口的右侧对齐。
- `z-index: -1;` 表示将元素的层级设置为 -1，即在页面中处于最底层，被其他元素覆盖。

.layui-layout-admin .layui-logo { position: fixed; left: 0; top: 0; z-index: 1002; width: 220px; height: 49px; padding: 0 15px; box-sizing: border-box; overflow: hidden; font-weight: 300; background-repeat: no-repeat; background-position: center center }

这是一个 CSS 样式代码，用于设置页面布局中左侧 Logo 的样式。其中，`.layui-layout-admin` 为页面布局的样式类，`.layui-logo` 为 Logo 元素的样式类。`position: fixed` 表示 Logo 元素在页面上固定位置不动，`left: 0; top: 0;` 表示 Logo 元素在页面的左上角位置，`z-index: 1002` 表示 Logo 元素的层级为 1002，即比页面中其他元素更高，`width: 220px; height: 49px;` 表示 Logo 元素的宽度和高度分别为 220 像素和 49 像素，`padding: 0 15px;` 表示 Logo 元素的内边距为 0 上下，15 左右，`box-sizing: border-box;` 表示元素的盒模型为 border-box，`overflow: hidden;` 表示 Logo 元素内容溢出时隐藏，`font-weight: 300;` 表示 Logo 元素文字的字重为 300，`background-repeat: no-repeat; background-position: center center` 表示 Logo 元素的背景图片不重复，居中显示。