CSS 覆盖和定位问题
[英]CSS overlaying and positioning issues
问题描述
我是 Web 开发的新手，目前正在使用纯 CSS 和 vanilla javascript。 我面临着一个问题。 以下是对问题所在的解释：
代码片段中附有一个测试网页，我试图构建一个具有 3D 导航栏的测试网页。 问题始于带有“main”类的 div 的绝对定位。 每当窗口的高度降低时，例如打开检查器时，页面的内容会随着高度的降低而逐渐从顶部切掉。 此外，在再次降低高度时打开菜单时，带有“main”的 div 会随着高度的降低而缩小，这是我不希望发生的。 我希望它与设备的高度保持一致。
注意：请全屏查看代码片段。 文本“Selenophile”应该位于中心，但虚拟文本将其向上移动，这也是一个问题。
就像，我想在更长的网页中实现这个设计，但我无法这样做，上面提到的是我可以指出的问题。 希望当你看到代码时它是有道理的。
作为初学者，您可能会在过程中发现一些不必要的代码行； 我很抱歉，希望你能忍受我。 在此先感谢您的帮助！
document.querySelector('.bar').addEventListener('click', () => { document.querySelector('.bar').classList.toggle('active'); document.querySelector('.main').classList.toggle('active'); document.querySelector('.container').classList.toggle('active'); });
@import url('http://fonts.cdnfonts.com/css/vivaldi'); :root { --time: .3s; } * { margin: 0; padding: 0; box-sizing: border-box; } .container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(-30deg, rgba(10, 20, 30, .6), rgba(0, 0, 5, 1)); } .nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 60px; display: flex; z-index: 2; } .nav p { color: #fff; flex-basis: 90%; line-height: 40px; font-size: 1.3rem; font-weight: 600; } .nav .bar { flex-basis: 10%; display: flex; justify-content: center; align-items: center; } .nav .bar .ham { width: max(30%, 30px); height: 2px; background: #fff; position: relative; } .nav .bar .ham::before { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; transform: translateY(-10px); } .nav .bar .ham::after { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; transform: translateY(10px); } .main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(https://es-static.z-dn.net/files/d52/3135fb500f7b226fdedbc7cc03d320f5.jpg) center/cover; transform-origin: left; transition: all var(--time); display: flex; justify-content: center; align-items: center; flex-flow: column; color: #fff; perspective: 1000px; transform-style: preserve-3d; z-index: 1; } .main h2 { color: lightcyan; font-size: 7rem; filter: brightness(230%); font-family: "Vivaldi"; } .main a { background: oldlace; width: 300px; padding: 20px; border-radius: 80px; letter-spacing: .15em; font-weight: 600; text-decoration: none; text-align: center; color: orangered; font-size: 1.5rem; margin-top: 20px; } .main p { font-size: 1.2rem; padding: 100px; text-align: center; } .main p span { font-size: 1.7rem; padding: 50px; } .main.active { transform: perspective(1000px) scale(.6) rotateY(10deg) translateZ(100px) translateX(300px); box-shadow: 1px 0px 40px 10px rgba(255, 255, 255, .2); } .container nav { position: absolute; top: 150px; right: 40px; width: 200px; } .container nav ul { list-style: none; } .container nav ul li a { display: block; text-decoration: none; padding: 20px 0; color: #fff; font-family: sans-serif; text-transform: uppercase; letter-spacing: .1em; transform: translateY(10px); } .navButtons { margin-right: 10px; }
<!DOCTYPE html> <html lang='en'> <head> <title>Test</title> <meta name='viewport' content='width=device-width'> </head> <body> <nav class='nav'> <p>BrandNAME</p> <div class='bar'> <div class='ham'></div> </div> </nav> <div class='main'> <h2>Selenophile</h2> <a href='#'>Sign up</a> <p> <span>ABOUT US</span><br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada ligula ac erat lobortis, id rutrum libero posuere. Donec luctus auctor nisi, vitae efficitur libero aliquam nec. Praesent finibus arcu sed nisi pharetra, vel consequat ligula tincidunt. Donec in purus tempor, consectetur lorem non, suscipit mi. Quisque viverra nibh eu hendrerit bibendum. Duis mollis in est id luctus. Donec vehicula et tellus ut mattis. Etiam porttitor orci vitae pharetra semper. Vivamus rhoncus at tellus non lobortis. Praesent interdum lobortis sapien, vel facilisis nulla pellentesque nec. Donec facilisis mauris libero, at auctor elit sollicitudin sit amet. Etiam volutpat elit sed accumsan malesuada. Ut magna erat, dapibus nec urna aliquet, maximus fringilla velit.<br><br> Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi commodo dui ac sem vehicula, et semper libero imperdiet. In purus sapien, fermentum vitae magna ac, malesuada luctus odio. In faucibus turpis et dapibus lacinia. Nam in nunc nunc. Praesent in mi mauris. Phasellus consectetur elit sit amet dolor maximus, non ultrices lorem imperdiet. Integer suscipit pellentesque erat, vitae euismod turpis. Vestibulum tempor fermentum dolor, ut pulvinar sem pulvinar sed. Phasellus viverra elit quam, in consectetur tortor sollicitudin nec. Integer convallis turpis faucibus tortor vehicula ultrices. Nulla commodo pretium nisi, in vulputate tellus malesuada nec. </p> </div> <div class='container'> <nav> <ul> <li><a href='#' class='navButtons'>Home</a></li> <li><a href='#' class='navButtons'>Profile</a></li> <li><a href='#' class='navButtons'>About</a></li> <li><a href='#' class='navButtons'>Services</a></li> <li><a href='#' class='navButtons'>FAQ</a></li> </ul> </nav> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2021-07-23 16:53:14
发生这种情况是因为.main正在使用.main positon: absolute; . 你给它一个height: 100% ，但它的工作方式与position: absolute;有点不同position: absolute; .
如果您将.main切换为使用position: relative; 并设置min-height: 100vh; 这将使它占据视口的整个高度，并且不会像以前那样脱离页面。
还有一些其他样式问题，但应该可以解决主要问题。
const bar = document.querySelector('.bar') const main = document.querySelector('.main'); const container = document.querySelector('.container'); function handleClick() { if (bar.classList.contains('active')) { bar.classList.remove('active'); main.classList.remove('active'); container.classList.remove('active'); setTimeout(function(){ main.classList.remove('crop'); main.style.height = 'auto'; }, 300); } else { const wHeight = window.innerHeight; main.style.height = `${wHeight}px`; main.classList.add('crop'); bar.classList.add('active'); main.classList.add('active'); container.classList.add('active'); } } bar.addEventListener('click', handleClick);
@import url('http://fonts.cdnfonts.com/css/vivaldi'); :root { --time: .3s; } * { margin: 0; padding: 0; box-sizing: border-box; } .container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(-30deg, rgba(10, 20, 30, .6), rgba(0, 0, 5, 1)); } .nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 60px; display: flex; z-index: 2; } .nav p { color: #fff; flex-basis: 90%; line-height: 40px; font-size: 1.3rem; font-weight: 600; } .nav .bar { flex-basis: 10%; display: flex; justify-content: center; align-items: center; } .nav .bar .ham { width: max(30%, 30px); height: 2px; background: #fff; position: relative; } .nav .bar .ham::before { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; transform: translateY(-10px); } .nav .bar .ham::after { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; transform: translateY(10px); } .main { position: relative; min-height: 100vh; width: 100%; height: 100%; background: url(https://es-static.z-dn.net/files/d52/3135fb500f7b226fdedbc7cc03d320f5.jpg) center/cover; transform-origin: left; transition: all var(--time); display: flex; align-items: center; flex-flow: column; color: #fff; perspective: 1000px; transform-style: preserve-3d; z-index: 1; } .crop{ height: 100%; max-height: 100vh; overflow:hidden; } .main h2 { color: lightcyan; font-size: 7rem; filter: brightness(230%); font-family: "Vivaldi"; } .main a { background: oldlace; width: 300px; padding: 20px; border-radius: 80px; letter-spacing: .15em; font-weight: 600; text-decoration: none; text-align: center; color: orangered; font-size: 1.5rem; margin-top: 20px; } .main p { font-size: 1.2rem; padding: 100px; text-align: center; } .main p span { font-size: 1.7rem; padding: 50px; } .main.active { transform: perspective(1000px) scale(.6) rotateY(10deg) translateZ(100px) translateX(300px); box-shadow: 1px 0px 40px 10px rgba(255, 255, 255, .2); } .container nav { position: absolute; top: 150px; right: 40px; width: 200px; } .container nav ul { list-style: none; } .container nav ul li a { display: block; text-decoration: none; padding: 20px 0; color: #fff; font-family: sans-serif; text-transform: uppercase; letter-spacing: .1em; transform: translateY(10px); } .navButtons { margin-right: 10px; }
<!DOCTYPE html> <html lang='en'> <head> <title>Test</title> <meta name='viewport' content='width=device-width'> </head> <body> <nav class='nav'> <p>BrandNAME</p> <div class='bar'> <div class='ham'></div> </div> </nav> <div class='main'> <h2>Selenophile</h2> <a href='#'>Sign up</a> <p> <span>ABOUT US</span><br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada ligula ac erat lobortis, id rutrum libero posuere. Donec luctus auctor nisi, vitae efficitur libero aliquam nec. Praesent finibus arcu sed nisi pharetra, vel consequat ligula tincidunt. Donec in purus tempor, consectetur lorem non, suscipit mi. Quisque viverra nibh eu hendrerit bibendum. Duis mollis in est id luctus. Donec vehicula et tellus ut mattis. Etiam porttitor orci vitae pharetra semper. Vivamus rhoncus at tellus non lobortis. Praesent interdum lobortis sapien, vel facilisis nulla pellentesque nec. Donec facilisis mauris libero, at auctor elit sollicitudin sit amet. Etiam volutpat elit sed accumsan malesuada. Ut magna erat, dapibus nec urna aliquet, maximus fringilla velit.<br><br> Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi commodo dui ac sem vehicula, et semper libero imperdiet. In purus sapien, fermentum vitae magna ac, malesuada luctus odio. In faucibus turpis et dapibus lacinia. Nam in nunc nunc. Praesent in mi mauris. Phasellus consectetur elit sit amet dolor maximus, non ultrices lorem imperdiet. Integer suscipit pellentesque erat, vitae euismod turpis. Vestibulum tempor fermentum dolor, ut pulvinar sem pulvinar sed. Phasellus viverra elit quam, in consectetur tortor sollicitudin nec. Integer convallis turpis faucibus tortor vehicula ultrices. Nulla commodo pretium nisi, in vulputate tellus malesuada nec. </p> </div> <div class='container'> <nav> <ul> <li><a href='#' class='navButtons'>Home</a></li> <li><a href='#' class='navButtons'>Profile</a></li> <li><a href='#' class='navButtons'>About</a></li> <li><a href='#' class='navButtons'>Services</a></li> <li><a href='#' class='navButtons'>FAQ</a></li> </ul> </nav> </div> </body> </html>
编辑：更新了脚本和一些样式。 需要删除
justify-content: center;在.main因为它导致内容在裁剪时离开屏幕。 我会让.main成为一个包装器，并将其他 flex 项目放入其中，以便它可以正确裁剪页面。
CSS定位，定位问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.