英文:
Pseudo element behind its element, when both elements are fixed?
问题
It is possible to use a before element for an overlay background on a nav, like this:
.nav {
background: white;
position: fixed;
}
.nav::before {
content: '';
background: black;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
The issue is that the black overlay sits above the white nav, yet you want it behind. This can be fixed by adjusting the stacking order with the z-index property in CSS.
英文:
Is it possible to use a before element for an overlay background on a nav, like this?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.nav {
background: white;
position: fixed;
}
.nav::before {
content: '';
background: black;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<!-- language: lang-html -->
<nav class="nav">
Nav content
</nav>
<!-- end snippet -->
The issue I have is that the black overlay sits above the white nav, yet I want it behind? How can this be fixed?
答案1
得分: 1
这可以通过在伪元素上使用isolation: isolate以及适当的定位和z-index来轻松实现：
.nav {
/* 为了使文本清晰可见 */
color: #fff;
/* 用于演示的易于看见的背景对比度 */
background: #f00;
/* 仅用于更好地说明 */
padding: 1rem;
/* 为了使后代伪元素相对于这个元素定位： */
position: relative;
/* 包含元素内的层叠，以便伪元素上的z-index: -1
不会将伪元素放在其父元素后面： */
isolation: isolate;
}
.nav::before {
content: '';
/* 用于演示的对比度 */
background-image: linear-gradient(90deg, transparent, black);
/* 为了将元素移出文档流，并进行定位： */
position: absolute;
/* 使用'inset'替代'top','right', 'bottom'和'left'： */
inset: 0;
z-index: -1;
}
<nav class="nav">
导航内容
</nav>
请注意，上述CSS和HTML代码用于实现指定效果，其中伪元素::before在导航元素.nav的背景上创建了一个覆盖效果。
英文:
This can easily be achieved with isolation: isolate along with a suitable positioning and z-index on the pseudo-element:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.nav {
/* to have the text stand out clearly */
color: #fff;
/* an easily-seen background for contrast
in the demo: */
background: #f00;
/* just to better illustrate: */
padding: 1rem;
/* in order that the descendant pseudo-element
is positioned in relation to this one:*/
position: relative;
/* to contain the stacking within the element,
so that z-index: -1 on the pseudo-element
doesn't place that pseudo-element behind
its parent: */
isolation: isolate;
}
.nav::before {
content: '';
/* for easy contrast for demonstration: */
background-image: linear-gradient(90deg, transparent, black);
/* in order to move the element out of
the document flow, and to be positioned: */
position: absolute;
/* using 'inset' in place of 'top','right', 'bottom'
and 'left': */
inset: 0;
z-index: -1;
}
<!-- language: lang-html -->
<nav class="nav">
Nav content
</nav>
<!-- end snippet -->
答案2
得分: -2
尝试使用 z-index，我希望这能帮助您 
.nav {
background: white;
z-index: 1;
}
.nav::before {
content: "";
background: black;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
}
<nav class="nav">
导航内容
</nav>
英文:
Try to use z-index, i hope that its help you
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.nav {
background: white;
z-index:1;
}
.nav::before {
content:"";
background: black;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index:-1;
}
<!-- language: lang-html -->
<nav class="nav">
Nav content
</nav>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论