我有一个标题标签,我设置了一个固定属性。在那个标题标签内,我有一个导航标签,我将它设置为绝对定位。我遇到的问题是我似乎无法将标题标签拉到导航标签前面。即使将标题标记设置为 1000 的 z-index 并将导航标记设置为 500 的 z-index。我正在尝试做的可能吗?
<header> <-- fixed position
<section> logo here </section>
<nav data-nav="main-navigation"> <-- absolute position
<ul>
<li><a href="#" id="selected">HOME <div></div></a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERIES</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>
这是一个代码笔来显示我正在尝试做什么
使用position: fixed
,子元素不能位于其父元素后面。诀窍是在父元素上使用伪元素,它将充当子元素的兄弟元素。
根据您的描述,文本将位于标题颜色的后面。
header{
position: fixed;
width: 100%;
height: 100px;
}
header::before {
content: '';
position: absolute;
height: 100%;
z-index: 100;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: red;
}
header nav{
position: fixed;
background-color: blue;
width: 50%;
height: 50vh;
top:0;
}
header ul{
list-style:none;
}
header a{
color: #fff;
}
<header>
<h1>HELLO</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
如果您希望文本显示在红色之上,则需要使用伪元素 onnav
代替。如果您不需要position: fixed
,您可以使用任何其他定位在父母身上结合z-index
对孩子的否定:
header{
position: absolute;
width: 100%;
background-color: red;
height: 100px;
}
header nav{
position: absolute;
background-color: blue;
width: 50%;
height: 50vh;
top:0;
z-index: -1;
}
header ul{
list-style:none;
}
header a{
color: #fff;
}
<header>
<h1>HELLO</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句