码农教程 - 一技在手,衣食无忧! tools

目录

CSS 布局 - z-index属性

❮ 上一节 下一节 ❯

这个z-index属性指定元素的堆栈顺序。

z-index 属性

当元素被定位时，它们可以与其他元素重叠。

这个z-index属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

元素可以具有正或负的堆栈顺序：

这是一个标题

由于图片的 z-index为 -1，因此它将放置在文本后面。

示例

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
亲自试一试 »

笔记：z-index仅适用于定位元素（位置：绝对、位置：相对、位置：固定或位置：粘性）和弹性项目（属于 display 的直接子元素的元素：flex 元素）。

另一个 z-index 示例

示例

在这里，我们看到具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素之上：

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>
亲自试一试 »

没有 z-index

如果两个定位元素彼此重叠而没有z-index指定，定义的元素HTML 代码的最后将显示在顶部。

示例

与上面的示例相同，但这里没有指定 z-index：

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>
亲自试一试 »

通过练习测试一下

练习:

标题和段落都位于页面顶部。

确保标题位于段落顶部。

<style>
 {
  position: absolute;
  top: 0;
  : 1;  
}
 {
  position: absolute;
  top: 0;
  : 0;
}
</style>

<body>
  <h1 id="mytitle">This is a heading</h1>
  <p id="myintro">This is a paragraph</p>
</body>

开始练习

CSS 属性

Property Description
z-index Sets the stack order of an element

❮ 上一节 下一节 ❯