css中层叠上下文

最新推荐文章于 2024-04-01 15:52:10 发布

FZ...

最新推荐文章于 2024-04-01 15:52:10 发布

阅读量44

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_48884170/article/details/134443145

版权

z-index属性作用是什么?

z-index属性用于控制定位元素在堆叠顺序（层叠上下文）中的显示顺序。它定义了一个元素相对于其父元素在垂直层叠顺序上的位置。
当页面上有多个元素重叠时，z-index属性可以帮助我们确定哪个元素应该显示在其他元素的上面。
z-index属性接受整数值、auto 和 inherit 作为值。较大的z-index值表示元素在层叠顺序中更靠近顶部，而较小的值则表示更靠近底部。如果两个具有z-index属性的元素发生重叠，那么z-index值较大的元素会显示在较小的z-index值元素的上面。
注意：z-index属性只对定位元素（即position属性值不是static的元素）有效，如果元素没有定位，则z-index属性会被忽略。
总之，通过使用z-index属性，可以控制页面上重叠元素的显示顺序，从而实现更灵活的布局效果。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.box-one {

width: 200px;

height: 200px;

background-color: turquoise;

position: absolute;

top: 50px;

left: 50px;

z-index: 1;

}

.box-two {

width: 300px;

height: 300px;

background-color: orangered;

position: absolute;

top: 100px;

left: 100px;

z-index: 2;

}

</style>

</head>

<body>

<div class="main">

<div class="box-one">1</div>

<div class="box-two">2</div>

</div>

</body>

</html>

z-index生效的条件是什么?

盒子的position属性值必须是relative、absolute或fixed。这意味着z-index只适用于相对定位、绝对定位和固定定位的盒子，而不适用于默认的静态定位盒子。
z-index只对具有堆叠上下文（stacking context）的盒子生效。
- position属性值为relative、absolute或fixed的盒子
- flex容器的子元素（flex items）
- grid容器的子元素（grid items）
z-index是一个整数值，较大的z-index值会使元素位于较小的z-index值之上。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.container {

position: relative;

width: 200px;

height: 200px;

background-color: greenyellow;

}

.box1 {

position: relative;

width: 100px;

height: 100px;

background-color: red;

z-index: 1;

}

.box2 {

position: absolute;

top: 50px;

left: 50px;

width: 100px;

height: 100px;

background-color: skyblue;

z-index: 2;

}

</style>

</head>

<body>

<div class="container">

<div class="box1"></div>

<div class="box2"></div>

</div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.container {

display: flex;

justify-content: space-between;

align-items: center;

width: 300px;

height: 200px;

background-color: orangered;

}

.item {

width: 100px;

height: 100px;

background-color: #66bb6a;

margin: 10px;

z-index: 2;

}

.item:nth-child(2) {

z-index: -1;

}

</style>

</head>

<body>

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

</div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.container {

display: grid;

grid-template-columns: 1fr 1fr;

width: 300px;

height: 200px;

background-color: skyblue;

}

.item {

width: 100px;

height: 100px;

background-color: #66bb6a;

margin: 10px;

z-index: 2;

}

.item:nth-child(2) {

z-index: -1;

}

</style>

</head>

<body>

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

</div>

</body>

</html>

z-index: 100一定在z-index: 0之上嘛? z-index会被什么因素影响?

在一般情况下，具有较高 z-index 值的元素会覆盖那些 z-index 值较低的元素。但是， z-index 的表现还受到其他因素的影响

定位属性	只有使用了定位属性（例如 position: relative, position: absolute, 或者 position: fixed）的元素才会对 z-index 属性产生影响。
堆叠上下文	当一个元素形成了堆叠上下文时，它的 z-index 表现会受到影响。一些属性，比如 opacity 和 transform，以及一些 CSS 属性（例如 flexbox 中的元素和 grid 布局中的元素），都可能导致元素形成堆叠上下文。
父元素的 z-index	子元素的 z-index 不能超过其父元素的 z-index。即使子元素设置了较高的 z-index 值，但如果父元素的 z-index 更高，子元素仍然无法覆盖父元素之外的其他元素。
同级元素的 z-index	在同一层级的元素中，z-index 值较高的元素会覆盖 z-index 值较低的元素。

为什么会形成层叠上下文? 什么情况下会形成层叠上下文?

层叠上下文（stacking context）是指某些元素及其子元素形成了一个独立的层叠顺序环境。这种环境内的元素在层叠顺序上相互独立，并且不会影响到其他层叠上下文中的元素。层叠上下文的形成是由一些特定属性和规则所决定的。

根元素	整个文档的根元素始终形成一个层叠上下文。
position 属性值不为 static 或者 z-index 值不为 auto 的定位元素	当元素的 position 属性值为 relative、absolute 或 fixed 时，并且设置了 z-index 值（非 auto），这个元素就形成了层叠上下文。
flex 容器或 grid 容器	当一个元素被设置为 flex container（display: flex 或 inline-flex）或 grid container（display: grid 或 inline-grid）时，它的所有子元素都会形成一个层叠上下文。
opacity 不为 1 的元素	当元素的 opacity 属性值不等于 1 时，它会形成自己的层叠上下文。
transform、filter、perspective 等属性不为默认值的元素	当元素使用了 transform、filter、perspective 等 CSS 属性并且值不是默认值时，它也会形成层叠上下文。
z-index 值不为 auto 的元素	当元素的 z-index 值不为 auto 时，它会形成层叠上下文。

层叠上下文的层叠顺序是怎么样的?

层叠上下文的层叠顺序是由多个因素决定的。当元素形成了层叠上下文后，它的子元素会在这个上下文中进行层叠，并且与其他层叠上下文中的元素相互独立。

背景和边框	元素的背景和边框首先被绘制，位于最底层。
负 z-index 值	具有负 z-index 值的元素按照其 z-index 值的从小到大的顺序排列，值最小的在最底层。
块级盒子	块级盒子按照它们在文档流中的顺序进行层叠。
浮动盒子	浮动盒子按照它们在文档流中的顺序进行层叠。
行内盒子和文字	行内盒子和文字的层叠顺序是由它们在文档流中的顺序决定的。
正 z-index 值	具有正 z-index 值的元素按照其 z-index 值的从小到大的顺序排列，值最大的在最顶层。

z-index不生效

// box-two为默认的静态定位盒子或者 fixed

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.box-one {

width: 200px;

height: 200px;

background-color: turquoise;

position: fixed;

top: 50px;

left: 50px;

z-index: 1;

}

.box-two {

width: 300px;

height: 300px;

background-color: orangered;

top: 100px;

left: 100px;

z-index: 2;

}

</style>

</head>

<body>

<div class="box-one">1</div>

<div class="box-two">2</div>

</body>

</html>

FZ...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css中层叠上下文

这意味着z-index只适用于相对定位、绝对定位和固定定位的盒子，而不适用于默认的静态定位盒子。属性用于控制定位元素在堆叠顺序（层叠上下文）中的显示顺序。z-index是一个整数值，较大的z-index值会使元素位于较小的z-index值之上。值表示元素在层叠顺序中更靠近顶部，而较小的值则表示更靠近底部。属性，可以控制页面上重叠元素的显示顺序，从而实现更灵活的布局效果。属性可以帮助我们确定哪个元素应该显示在其他元素的上面。的元素）有效，如果元素没有定位，则。值较大的元素会显示在较小的。
复制链接

扫一扫