如何让文本显示在div下方?网站视频intro内容重叠问题求助
问题描述
网站顶部设置了视频intro,希望网站内容显示在其下方,但添加测试文本后,文本出现在视频上方,仅导航栏能将其与顶部隔开,求解决方案。
(附问题截图)
现有代码
CSS
:root { --bg-color: #141414; --text-color: #fff; --default-text-color: #fff; --secondary-color: #ff0000; } body { background-color: var(--bg-color); color: var(--default-text-color); font-family: Rubik; font-weight: 400; width: 100%; position: static!important; top: 0!important; margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .loader { position: fixed; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-color); transition: all .5s; z-index: 99; cursor: progress; overflow: hidden; } .loader .logo { font-size: 70px; color: var(--text-color); font-family: 'adrippingmarker', Arial; } .privacy-policy { position: absolute; display: block; bottom: 0; margin-bottom: 20px; font-family: Arial; font-weight: 900; text-decoration: none; color: var(--text-color); } .privacy-policy:hover { cursor: default; } .navbar { width: 100%; margin: 0; top: 0; position: sticky; display: block; align-items: center; justify-content: center; text-align: center; overflow: hidden; z-index: 80; } .navbar .nav-btn { margin-left: 30px; padding: 0; margin-top: 70px; color: var(--text-color); display:inline-block; text-decoration: none; font-family: 'montserrat'; font-weight: 600; z-index: 81; } .navbar .nav-btn-first { padding: 0; margin-top: 70px; color: var(--text-color); display:inline-block; text-decoration: none; font-family: 'montserrat'; font-weight: 600; z-index: 81; } .nav-logo { font-family: 'adrippingmarker', Arial; padding-top: 70px; margin-left: 30px; font-size: 75px; text-decoration: none; color: var(--text-color); z-index: 81; } .nav-logo:hover { background-image: url(../img/logo-hvr.gif); background-size: cover; color: transparent; -moz-background-clip: text; -webkit-background-clip: text; -webkit-transition: transform 0.3s ease-in-out; -moz-transition: transform 0.3s ease-in-out; -ms-transition: transform 0.3s ease-in-out; } #intro-video-video, .intro-video, #intro-video-alternative { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; left: 0px; top: 0px; padding: 0; margin: 0; z-index: -1; } @media only screen and (max-width: 683px) { .nav-btn, .nav-btn-first { display: none !important; } }
HTML
<div class="navbar"> <a class="nav-btn-first" href="./gallery.php">Gallery</a> <a class="nav-btn" href="./meet-us.php">Our Team</a> <a class="nav-logo" href="./">misfits.</a> <a class="nav-btn" href="./contact.php">Contact Us</a> <a class="nav-btn" href="./social.php">Socials</a> </div> <div class="video-intro"> <video id="intro-video-video" autoplay loop muted> <source src="./assets/video/bg.mp4" type='video/mp4'> <img id="intro-video-alternative" src="alternative.jpg" /> </video> </div> <p> ljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsfjsdhfjhsdkfljsf
相关产品推荐
相关产品推荐

