我制作了一个简单的网页并且工作正常,但出于某种原因,如果我想将CSS中的位置从固定更改为静态,则网页会完全崩溃。
我试图改变HTML中的顺序,但似乎也没有工作......
可能出现错误的代码在这里:
* {
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
.v-header {
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.fullscreen-video-wrap{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.fullscreen-video-wrap video {
min-height: 100%;
min-width: 100%;
}
.header-overlay {
height: 100vh;
position: absolute;
top: 0;
left: 0;
width: 100vw;
z-index: 1;
background: #225470;
opacity: 0.85;
}
.header-content {
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
}
.header-content h1{
font-size: 50px;
margin-bottom: 0;
}
.header-content p {
font-size: 1.5rem;
display: block;
padding-bottom: 2rem;
}
button {
background: #34b3a0;
color: #fff;
font-size: 1.2rem;
padding: 1rem 2rem;
text-decoration: none;
}
.section {
padding: 20px 0;
}
.section-b {
background: #333;
color: #fff;
}
@media(max-width:960px) {
.container {
padding-right: 3rem;
padding-left: 3rem;
}
}
nav {
position: fixed;
z-index: 3;
background-color: #005EFF;
}
.w3-content {
z-index: 2;
}
有关更多详细信息和其余代码,请参阅codepen.io链接:https://codepen.io/anon/pen/WzWvMP
谢谢,
米格尔
答案 0 :(得分:1)
如果您只想更改导航,则可以更改为绝对位置。
当静止时,它将进入容器,当绝对时,它将会扩散。