【发布时间】：2021-09-23 18:36:15
【问题描述】：
我需要把div.header.bg```` to render at the bottom behind everything, then div.page.bg```放在前面，然后是所有其他内容“正常”。我尝试了各种 z-index，但无法理解堆叠上下文。
很高兴进行更改，但我受到div.header.bg 的限制，它需要保持原位，以便其高度与其父级匹配（加上一点以使其位于搜索栏的中间）。
这是来自笔的代码 - 我已取出任何 z-index 或非布局定位以使其成为“空白画布” - 有人可以帮忙吗？当时关于类似主题的解决方案都没有奏效，可能是因为它们是更简单的结构（父级后面的子级）
html
<div class="d-flex justify-content-center">
<div class="pageWrap m-3">
<div class="page bg"></div>
<div class="mainWrap container-fluid d-flex flex-column justify-content-center px-5">
<div class="headerWrap w-100 text-center p-5">
<div class="header bg"></div>
<div class="header mx-auto">
<h1 class="mt-5 mb-3" data-unsp-sanitized="clean">ePCR Case Reference Validator</h1>
<p class="my-3">This is a simple tool for validating ePCR case references</p>
</div>
</div>
<div class="row justify-content-center">
<div class="searchContainer w-100 d-flex justify-content-center p-3 position-relative">
<input type="text" class="form-control w-100" placeholder="Enter the ePCR case reference here" maxlength="12" value="">
</div>
</div>
<div class="row justify-content-center mb-5"></div>
</div>
</div>
</div>
</div>
css (scss)
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
//variable overwrites
$bgBorderRadius: 20px;
$underScoreBorderWidth: 0.2rem;
$easeOutCirc: cubic-bezier(0, 0.55, 0.45, 1);
html, body {
margin: 0;
padding: 0;
background-color: #353b48 !important;
}
div.pageWrap {
max-width: 720px;
}
div.pageWrap {
position: relative;
top: -1px;
}
div.page.bg {
position: absolute;
top: 0;
left: 0;
background-color: #f5f6fa;
border: 1px solid #dcdde1;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
mix-blend-mode: lighten;
border-radius: $bgBorderRadius;
opacity: 0.75;
width: 100%;
height: 100%;
}
div.searchContainer {
}
div.searchContainer > input {
height: 4rem;
font-size: 2rem;
text-align: center;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.25rem;
}
div.searchContainer > input::placeholder {
text-transform: none;
font-weight: initial;
letter-spacing: initial;
color: gray;
}
div.headerWrap, div.header {
position: relative;
}
div.header.bg {
position: absolute;
top: -1rem;
left: min(0px, calc((100% - 100vw) / 2));
width: 100vw;
height: calc(100% + 4rem);
background-color: #40739e;
background-image: url("https://products.ls.graphics/mesh-gradients/images/25.-Witch-Haze_1.jpg");
background-size: cover;
background-position: 50% 50%;
}
p.resultString {
font-size: 3rem;
text-transform: uppercase;
font-weight: 600;
text-align: center;
}
p.resultString span {
display: inline-block;
}
span.letter {
padding: 0 0.5rem;
}
span.letter.letterMatch {
position: relative;
}
span.letter > span.letterCaret {
position: absolute;
left: 50%;
width: 0;
display: inline-block;
border: 10px solid transparent;
border-top-color: inherit;
content: "";
transform: translateX(-50%);
}
div.stringUnderscore {
height: 1rem;
border: $underScoreBorderWidth solid;
border-top: none;
position: absolute;
////move left by one padding + one border width
////padding: 0 0.25rem;
//box-sizing: content-box;
//transform: translateX(-0.45rem);
transition: left 400ms $easeOutCirc, width 400ms $easeOutCirc, border-color 400ms $easeOutCirc;
}
.stringUnderscore:after {
content: "";
height: 1rem;
position: absolute;
border-left: $underScoreBorderWidth solid;
border-left-color: inherit;
top: 100%;
left: calc(50% - (#{$underScoreBorderWidth} / 2));
transition: border-left-color 400ms $easeOutCirc;
}
.stringUnderscoreText {
position: relative;
left: 50%;
top: 200%;
transform: translate(-50%);
color: inherit;
font-weight: 500;
text-align: center;
display: inline-block;
width: auto;
padding-top: 0.5rem;
}
div.resultIcon {
width: 100%;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
div.resultIcon > svg {
width: 100%;
height: 100%;
}
p.iconText {
font-size: 1.5rem;
}
【问题讨论】：