css - CSS:使元素的z-index低于兄弟的孩子
问题描述
问题是标题:我需要它看起来固定在固定部分并且仍然可以点击。当第一部分滚动到标题上时,它应该覆盖标题。
我可以随意移动或更改标题:
<a href="#" class="header">
THIS IS THE HEADER
<span style="font-size: 12px;">(you can hover me)</span><br>
<span style="font-size: 14px; font-style: italic; letter-spacing: 0.05em;">which should be <br> OVER "invisible section" AND "fixed section" <br> BUT UNDER "first section", <br>WHILE maintaining fixed position</span>
</a>
虽然我可以将标题添加到不可见部分,但我无法更改这些部分的整体结构:
<div class="section section-fixed">
fixed section underneath "invisible section"
</div>
<div class="wrapper">
<div class="section section-invisible">
<h2>invisible section</h2>
</div>
<div class="section section-first">
first section
</div>
</div>
我尝试将标题添加到不可见部分,虽然这可以保持标题可点击,但我无法让它看起来与固定部分相同。
我意识到描述它可能会令人困惑,所以这里有一些随附的图像,请检查FIDDLE
@import url("https://fonts.googleapis.com/css2?family=Baloo+Da+2&display=swap");
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
font-family: 'Baloo Da 2', cursive;
}
.header {
background: floralwhite;
display: inline-block;
padding: 10px;
position: fixed;
z-index: 3;
left: 30px;
top: 30px;
color: inherit;
text-decoration: none;
line-height: 1.2;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
transition: all .5s ease;
}
.header:hover {
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5);
background-color: pink;
}
.wrapper {
border: 2px solid red;
z-index: 2;
position: relative;
}
.section {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.section-fixed {
background: gray;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
.section-invisible {
align-items: flex-end;
padding: 0;
}
.section-invisible h2 {
background: goldenrod;
padding: 50px;
margin: 0;
width: 100%;
text-align: center;
}
.section-first {
background: darkslateblue;
color: white;
}
<a href="#" class="header">
THIS IS THE HEADER
<span style="font-size: 12px;">(you can hover me)</span><br>
<span style="font-size: 14px; font-style: italic; letter-spacing: 0.05em;">which should be <br> OVER "invisible section" AND "fixed section" <br> BUT UNDER "first section", <br>WHILE maintaining fixed position</span>
</a>
<div class="section section-fixed">
fixed section underneath "invisible section"
</div>
<div class="wrapper">
<div class="section section-invisible">
<h2>invisible section</h2>
</div>
<div class="section section-first">
first section
</div>
</div>
滚动后:
解决方案
在下面更新您的z-index
喜欢。最重要的是不要设置任何z-index
包装器:
@import url("https://fonts.googleapis.com/css2?family=Baloo+Da+2&display=swap");
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
font-family: 'Baloo Da 2', cursive;
}
.header {
background: floralwhite;
padding: 10px;
position: fixed;
z-index: 2; /* here */
left: 30px;
top: 30px;
color: inherit;
text-decoration: none;
line-height: 1.2;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
transition: all .5s ease;
}
.header:hover {
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5);
background-color: pink;
}
.wrapper {
border: 2px solid red;
position: relative;
}
.section {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.section-fixed {
background: gray;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1; /* here */
}
.section-invisible {
align-items: flex-end;
padding: 0;
position: relative;
z-index: 1; /* here */
}
.section-invisible h2 {
background: goldenrod;
padding: 50px;
margin: 0;
width: 100%;
text-align: center;
}
.section-first {
background: darkslateblue;
color: white;
position: relative;
z-index: 2; /* here */
}
<a href="#" class="header">
THIS IS THE HEADER
<span style="font-size: 12px;">(you can hover me)</span><br>
<span style="font-size: 14px; font-style: italic; letter-spacing: 0.05em;">which should be <br> OVER "invisible section" AND "fixed section" <br> BUT UNDER "first section", <br>WHILE maintaining fixed position</span>
</a>
<div class="section section-fixed">
fixed section underneath "invisible section"
</div>
<div class="wrapper">
<div class="section section-invisible">
<h2>invisible section</h2>
</div>
<div class="section section-first">
first section
</div>
</div>
推荐阅读
- python-3.x - 证书文本阅读脚本
- amazon-web-services - aws dynamodb 连接池已满警告
- node.js - 使用 NVM 更新后节点版本不保留
- sql - PowerBI 报表或 SQL 查询分组数据跨越列
- database - Dynamo DB 中的多个属性作为哈希键
- javascript - 没有任何错误但按钮不起作用
- c++ - 我可以纹理这个以 GL_TRIANGLE_STRIP 模式渲染的立方体吗?
- java - 不兼容类型的嵌套部分
- python - Python 3 - 带有 while 循环的全局变量
- vb.net - 我的数据没有显示在数据库的文本框中