admin管理员组文章数量:1129002
I was learning about stacking context and then I wanted to give it a try and test what I had just learned.
As I have understood, z-index works only on those elements that are inside a stacking context and they can never go outside their stacking context. That's why I created 3 boxes, each with their own stacking context, and I put box4 inside box1. I changed its z-index to prove my point that it’s not going to overlap box2 and box3 because the z-index works only inside box1. So even if box4 has a z-index of 999999, it should still not overlap box2 and box3 because they are outside of its stacking context.
But guess what: box4 got over box2 and box3 with a z-index of only 1.
I am really shocked by this and wanted to ask if I had a false understanding of stacking context, or if what I learned was outdated and no longer the case.
h1 {
text-decoration: underline;
}
.absolute {
position: absolute; /*Created a stacking-context*/
vertical-align: bottom;
text-align: end;
}
.box4 {
z-index: 1; /* This should effect the stacking order of box4 only within box1*/
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<header>
<div
style="width: 500px; height: 500px; background-color: red"
class="absolute box1"
>
<div
style="
width: 200px;
height: 200px;
background-color: rgb(215, 15, 255);
"
class="absolute box4"
>box4</div>
box1
</div>
</header>
<main>
<div
style="width: 400px; height: 400px; background-color: goldenrod"
class="absolute box2"
>
box2
</div>
</main>
<footer>
<div
style="width: 300px; height: 300px; background-color: rgb(30, 255, 0)"
class="absolute box3"
>
box3
</div>
</footer>
</body>
</html>I was learning about stacking context and then I wanted to give it a try and test what I had just learned.
As I have understood, z-index works only on those elements that are inside a stacking context and they can never go outside their stacking context. That's why I created 3 boxes, each with their own stacking context, and I put box4 inside box1. I changed its z-index to prove my point that it’s not going to overlap box2 and box3 because the z-index works only inside box1. So even if box4 has a z-index of 999999, it should still not overlap box2 and box3 because they are outside of its stacking context.
But guess what: box4 got over box2 and box3 with a z-index of only 1.
I am really shocked by this and wanted to ask if I had a false understanding of stacking context, or if what I learned was outdated and no longer the case.
h1 {
text-decoration: underline;
}
.absolute {
position: absolute; /*Created a stacking-context*/
vertical-align: bottom;
text-align: end;
}
.box4 {
z-index: 1; /* This should effect the stacking order of box4 only within box1*/
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<header>
<div
style="width: 500px; height: 500px; background-color: red"
class="absolute box1"
>
<div
style="
width: 200px;
height: 200px;
background-color: rgb(215, 15, 255);
"
class="absolute box4"
>box4</div>
box1
</div>
</header>
<main>
<div
style="width: 400px; height: 400px; background-color: goldenrod"
class="absolute box2"
>
box2
</div>
</main>
<footer>
<div
style="width: 300px; height: 300px; background-color: rgb(30, 255, 0)"
class="absolute box3"
>
box3
</div>
</footer>
</body>
</html>1 Answer
Reset to default 1You haven't created new stacking contexts simply by position: absolute. You need something else, e.g. z-index to anything other than auto. So in your example div1 does not create a stacking context as such.
This snippet explicitly sets the z-index of div1-3 so that they do create their own stacking contexts.
In this scenario you can see that div4 is within div1's stacking context (i.e. it can't be seen) as it is 'behind' div2 and div3.
h1 {
text-decoration: underline;
}
.absolute {
position: absolute;
/*Created a stacking-context*/
z-index: 0;
/* ADDED to ensure there is a new stacking context */
vertical-align: bottom;
text-align: end;
}
.box4 {
z-index: 1;
/* This should effect the stacking order of box4 only within box1*/
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<header>
<div style="width: 500px; height: 500px; background-color: red" class="absolute box1">
<div style="
width: 200px;
height: 200px;
background-color: rgb(215, 15, 255);
" class="absolute box4">box4</div>
box1
</div>
</header>
<main>
<div style="width: 400px; height: 400px; background-color: goldenrod" class="absolute box2">
box2
</div>
</main>
<footer>
<div style="width: 300px; height: 300px; background-color: rgb(30, 255, 0)" class="absolute box3">
box3
</div>
</footer>
</body>
</html>
h1 {
text-decoration: underline;
}
.absolute {
position: absolute; /*Created a stacking-context*/
vertical-align: bottom;
text-align: end;
}
.box4 {
z-index: 1; /* This should effect the stacking order of box4 only within box1*/
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<header>
<div
style="width: 500px; height: 500px; background-color: red"
class="absolute box1"
>
<div
style="
width: 200px;
height: 200px;
background-color: rgb(215, 15, 255);
"
class="absolute box4"
>box4</div>
box1
</div>
</header>
<main>
<div
style="width: 400px; height: 400px; background-color: goldenrod"
class="absolute box2"
>
box2
</div>
</main>
<footer>
<div
style="width: 300px; height: 300px; background-color: rgb(30, 255, 0)"
class="absolute box3"
>
box3
</div>
</footer>
</body>
</html>本文标签： htmlCSS Stacking Context Issue Nested Element Overlapping Parent39s Sibling ElementStack Overflow
版权声明：本文标题：html - CSS Stacking Context Issue: Nested Element Overlapping Parent's Sibling Element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736735260a1950218.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论