[英]Why is the content of my h1 going on top of a fixed navbar component?
Issue问题
The content of my h1 is going on top of my navbar.我的 h1 的内容在我的导航栏之上。
Attempts at a solution尝试解决方案
I saw other threads where they changed the z-index of the nav element to 1, but that didn't work.我看到其他线程将导航元素的 z-index 更改为 1,但这不起作用。 I also tried adding margins to both the container that has the h1 and the nav element to push them away from eachother, but that had no effect.我还尝试为具有 h1 和 nav 元素的容器添加边距以将它们彼此推开,但这没有效果。
Information信息
I am using NUXT where I have a default.vue in my layouts folder that looks like this:我正在使用 NUXT,其中我的布局文件夹中有一个 default.vue,如下所示:
<template>
<div class="container">
<Navbar/>
<Nuxt/>
<img src="revue/assets/nuxtjs-typo.svg" alt="nuxt-typo">
</div>
</template>
<script>
import Navbar from '../components/Navbar.vue';
export default {
components: {
Navbar
}
}
</script>
And in the pages section I have an index.vue that contains the h1:在页面部分我有一个包含 h1 的 index.vue:
<template>
<div class="container">
<h1>This text is on top of the nav</h1>
</div>
</template>
<script>
export default {}
</script>
<style>
html, body {
margin: 0;
padding: 0;
}
h1 {
color: #2F495E;
font-family: 'Quicksand', sans-serif;
font-size: 1em;
text-align: center;
}
</style>
And finally the Navbar.vue component in the components folder:最后是 components 文件夹中的 Navbar.vue 组件:
<template>
<nav>
<ul>
<li>
<img id="nuxticon" src="../assets/nuxt-icon.png" alt="nuxticon">
</li>
<li>
<img id="nuxttext" src="../assets/nuxtjs-typo.svg" alt="nuxttext">
</li>
<li>
<NuxtLink to="/docs">Udforsk</NuxtLink>
</li>
<li>
<NuxtLink to="/about">Om os</NuxtLink>
</li>
<li>
<NuxtLink to="/field">Tilføj restaurant</NuxtLink>
</li>
<li>
<NuxtLink to="/damage">Kontakt</NuxtLink>
</li>
</ul>
</nav>
</template>
<style>
nav {
position: fixed;
box-shadow: 0 1px 3px -3px gray;
width: 100vw;
height: 8vh;
top: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
nav ul li {
display: flex;
align-items: center;
}
a {
font-size: 1.5vh;
margin-left: 2vw;
text-decoration: none;
color: #2F495E;
font-family: 'Quicksand', sans-serif;
text-transform: uppercase;
}
#nuxttext {
height: 3vh;
width: 10vw;
margin-right: 8vw;
}
#nuxticon {
height: 5vh;
margin-right: 0.5vw;
}
a:hover {
color: #08C792;
}
</style>
This results in the h1 text sitting on top of the nav, instead of below it, as intended.这会导致 h1 文本按预期位于导航顶部,而不是位于导航下方。
Your position: fixed
on nav
is making that it's out of the flow , so the h1
cannot know that he needs to be offset.您的position: fixed
on nav
正在使其脱离流程,因此h1
无法知道他需要偏移。 Either remove the fixed
or apply a margin-top
of 8vh
(to match nav's height).删除fixed
或应用8vh
的margin-top
(以匹配导航的高度)。
Here is a hosted solution with Vanilla CSS: https://play.tailwindcss.com/eN9umaRtr5这是使用 Vanilla CSS 的托管解决方案: https://play.tailwindcss.com/eN9umaRtr5
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.