使用 CSS 与 Z 索引重叠元素

百变鹏仔 3个月前 (09-20) #CSS

文章标签索引

使用 css z-index 属性，开发人员可以将元素堆叠在一起。 z-index 可以有正值或负值。

注意 - 如果重叠的元素没有指定 z-index，则该元素将显示文档最后提到。

示例

让我们看一个 z-index 属性的示例 -

强>现场演示

<!DOCTYPE html><html><head><style>p {   margin: 0;   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);}div{   margin: auto;   position: absolute;   top:0;   left: 0;   right: 0;   bottom: 0;}div:first-child {   background-color: orange;   width: 270px;   height: 120px;   z-index: -2;}div:last-child {   width: 250px;   height: 100px;   z-index: -1;   background-color: turquoise;}</style></head><body><div></div><p>Fortran was originally developed by a team at IBM in 1957 for scientific calculations...................</p><div></div></body></html>

输出

以下是上述代码的输出：

立即学习“前端免费学习笔记（深入）”；

示例

让我们看另一个z-index属性的示例：

实时演示

<!DOCTYPE html><html><head><style>p {   background: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg");   background-origin: content-box;   background-repeat: no-repeat;   background-size: cover;   box-shadow: 0 0 3px black;   padding: 20px;   background-origin: border-box;}</style></head><h2>Demo</h2><body><p>This is demo text. This is demo text. This is demo text. This is demo text.This is demo text. This is demo text. This is demo text. This is demo text.This is demo text. This is demo text. This is demo text. This is demo text.This is demo text.</p></body></html>

输出

以下是上述代码的输出 -

文章推荐

使用 CSS 与 Z 索引重叠元素

示例

强>现场演示

输出

示例

实时演示

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写