我是编程的初学者。目前正在处理产品着陆页。我使用 iframe 嵌入了来自 youtube 的视频,并将导航栏固定在顶部。向下滚动时,视频在导航栏上滑动。我应该怎么做才能使视频像页面其他内容一样在导航栏中向下滚动?
这是HTML文件的代码:
<div class="logo">
<img id="header-img" src="http://www.logodust.com/img/free/logo2.png" alt="Company Logo" title="comapany logo">
<h1>
Pilot - Capless Since 1984
</h1>
</div>
<div class="menu">
<ul>
<li>
<a class="nav-link" href="#container">Home</a>
</li>
<li>
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<li>
<a class="nav-link" href="#products">Products</a>
</li>
<li>
<a class="nav-link" href="#contact-info">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<section class="videoWrapper">
<iframe id="video" width="600" height="340" src="https://www.youtube.com/embed/l__LJ8NF6eQ" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen ></iframe>
</section>
</div>
导航栏的CSS代码:
#header {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
}
#nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #05386B;
color: #EDF5E1;
}
.logo {
margin-left: 25px;
}
.logo #header-img {
float: left;
width: 50px;
height: 50px;
}
.logo h1 {
font-family: 'Pacifico', cursive;
font-size: 30px;
float: right;
position: relative;
top: 5px;
left: 10px;
}
.menu {
display: flex;
align-items: center;
}
.menu ul {
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
.menu li {
padding: 15px;
margin-right: 30px;
font-size: 25px;
}
iframe 的 CSS 代码:
.videoWrapper {
position: relative;
padding-bottom: 35%;
height: 0;
padding-top: 20px;
overflow: hidden;
}
.videoWrapper iframe {
border: 5px solid #05386B;
position: absolute;
top: 5em;
bottom: 2em;
left: 0;
right: 0;
margin: auto;
}
提前致谢
最佳答案
标题和视频的 z-index
您缺少代码 <header>
在你上面的代码中。此外,标题没有 ID,因为它不存在,所以我添加了缺失的代码并将标题样式添加为 CSS HTML 元素 header
.
我已将 0 的 z-index 添加到 .videoWrapper iframe
z-index 为 1 到 header
我还在您的标题中添加了浅灰色背景,以便您可以更好地查看结果。
什么是 z-index?
z-index 是确定 HTML 盒模型中层顺序的方式。数字越大,它的顶部就越高。
希望这对您的元素有所帮助并祝您好运:)
<style>
header {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
z-index:1;
background:#ddd;
}
#nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #05386B;
color: #EDF5E1;
}
.logo {
margin-left: 25px;
}
.logo #header-img {
float: left;
width: 50px;
height: 50px;
}
.logo h1 {
font-family: 'Pacifico', cursive;
font-size: 30px;
float: right;
position: relative;
top: 5px;
left: 10px;
}
.menu {
display: flex;
align-items: center;
}
.menu ul {
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
.menu li {
padding: 15px;
margin-right: 30px;
font-size: 25px;
}
.videoWrapper {
position: relative;
padding-bottom: 35%;
height: 0;
padding-top: 20px;
overflow: hidden;
}
.videoWrapper iframe {
border: 5px solid #05386B;
position: absolute;
top: 5em;
bottom: 2em;
left: 0;
right: 0;
margin: auto;
z-index:0;
}
</style>
<header>
<div class="logo">
<img id="header-img" src="http://www.logodust.com/img/free/logo2.png" alt="Company Logo" title="comapany logo">
<h1>
Pilot - Capless Since 1984
</h1>
</div>
<div class="menu">
<ul>
<li>
<a class="nav-link" href="#container">Home</a>
</li>
<li>
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<li>
<a class="nav-link" href="#products">Products</a>
</li>
<li>
<a class="nav-link" href="#contact-info">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<section class="videoWrapper">
<iframe id="video" width="600" height="340" src="https://www.youtube.com/embed/l__LJ8NF6eQ" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen ></iframe>
</section>
</div>
关于html - 嵌入式 iframe 视频在滚动时与固定导航栏重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52091989/