Nic*_*son 3 html javascript css video
我的网站（又名：http: //redstonegaming.com ）上有一些文本和 YouTube 视频，但它不允许我启动视频。任何帮助将不胜感激。另外，当我将内容 div 设置为 z-index: 99 时，它可以工作，但我的下拉菜单位于内容下方。反之亦然。
\n\nvar rick = false;\r\nvar audio = new Audio(\'rick_roll.mp3\');\r\nvar kkeys = [],\r\n konami = "38,38,40,40,37,39,37,39,66,65,13";\r\n$(document).keydown(function(e) {\r\n kkeys.push(e.keyCode);\r\n if (kkeys.toString().indexOf(konami) >= 0) {\r\n kkeys = []; // <-- Change here\r\n if (rick == false) {\r\n rick = true;\r\n audio.play();\r\n } else if (rick == true) {\r\n rick = false;\r\n audio.pause(); // <-- another issue\r\n }\r\n }\r\n});/*Some Fonts Here:*/\r\n@font-face { font-family: Rusty; src: url(\'BrushScriptStd.otf\');}\r\n* {\r\n\tfont-family: Rusty;\r\n\tfont-weight: Lighter;\r\n}\r\n.background\r\n{\r\n\tbackground-image: url(0.jpg);\r\n\tbackground-attachment: fixed;\r\n\tbackground-size: 100% auto;\r\n\tbackground-color: f7f7f7;\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position:absolute;\r\n}\r\n.menubar {\r\n height: 2.8vw;\r\n opacity: 0.85;\r\n background-color: #CCCCCC;\r\n}\r\n.clearfix:after {\r\n display: block;\r\n clear: both;\r\n}\r\n.menu-wrap {\r\n width: 50%;\r\n box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);\r\n background: #3e3436;\r\n}\r\n.menu {\r\n width: 100%;\r\n margin: 0px auto;\r\n text-align: center;\r\n}\r\n.menu li {\r\n margin: 0px;\r\n list-style: none;\r\n font-family: \'Ek Mukta\';\r\n}\r\n.menu a {\r\n transition: all linear 0.15s;\r\n color: #919191;\r\n}\r\n.menu li:hover > a,\r\n.menu .current-item > a {\r\n text-decoration: none;\r\n color: rgba(189, 34, 34, 1);\r\n}\r\n.menu .arrow {\r\n font-size: 0.95vw;\r\n line-height: 0%;\r\n}\r\n.menu > ul > li {\r\n float: middle;\r\n display: inline-block;\r\n position: relative;\r\n font-size: 1.2vw;\r\n}\r\n.menu > ul > li > a {\r\n padding: 0.7vw 5vh;\r\n display: inline-block;\r\n text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);\r\n}\r\n.menu > ul > li:hover > a,\r\n.menu > ul > .current-item > a {\r\n background: #2e2728;\r\n}\r\n.menu li:hover .sub-menu {\r\n display: block;\r\n z-index: 99;\r\n}\r\n.sub-menu {\r\n width: 100%;\r\n padding: 0px 0px;\r\n position: absolute;\r\n top: 100%;\r\n left: 0px;\r\n display: none;\r\n transition: opacity linear 5.8s;\r\n box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);\r\n background: #2e2728;\r\n}\r\n.sub-menu li {\r\n display: block;\r\n font-size: 1.2vw;\r\n}\r\n.sub-menu li a {\r\n padding: 10px 10px;\r\n display: block;\r\n}\r\n.sub-menu li a:hover, .sub-menu .current-item a {\r\n background: #3e3436;\r\n}\r\n.Rusty \r\n{\r\n\tfont-family: "Rusty";\r\n\tcolor: rgba(189, 34, 34, 1);\r\n}\r\n.content\r\n{\r\n\topacity: .85;\r\n\tposition: relative;\r\n\tmargin: auto;\r\n width: 80%;\r\n\tz-index: -1; \r\n background-color: #CCCCCC;\r\n padding: 10px;\r\n\theight: 100%;\r\n}\r\n.menu > ul > .login \r\n{\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n}\r\n.video-container {\r\n\tposition:relative;\r\n\tpadding-bottom:56.25%;\r\n\tpadding-top:30px;\r\n\twidth: 100%;\r\n}\r\n\r\n.video-container iframe, .video-container object, .video-container embed {\r\n\tposition:absolute;\r\n\ttop:15;\r\n\tleft:15%;\r\n\tright:15%;\r\n\twidth: 25vw;\r\n\theight:25vh;\r\n}\r\n.title\r\n{\r\n\ttext-align: center;\r\n\tfont-size: 7vh;\r\n\ttext-decoration: underline;\r\n\t-moz-text-decoration-color: inherit;\r\n text-decoration-color: inherit;\r\n}\r\n.feed-column\r\n{\r\n\twidth: 50%;\r\n}\r\n.text-center\r\n{\r\n\ttext-align: center;\r\n}<html>\r\n <head>\r\n <meta name="generator"\r\n content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />\r\n <link rel="stylesheet" type="text/css" href="style.css" />\r\n <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />\r\n <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>\r\n <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>\r\n <link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css"\r\n name="www-subscribe-widget" />\r\n <meta name="viewport" content="width=device-width, initial-scale=1" />\r\n <script src="script.js"></script>\r\n <link rel="shortcut icon" href="favicon.ico" />\r\n <title>RG - Home</title>\r\n </head>\r\n <body class="background">\r\n <div class="menubar">\r\n <nav class="menu">\r\n <ul class="clearfix">\r\n <li>\r\n <a href="aboutme.html">About Me \r\n <span class="arrow">\xe2\x96\xbc</span></a>\r\n <ul class="sub-menu">\r\n <li>\r\n <a href="#">Gaming</a>\r\n </li>\r\n <li>\r\n <a href="#">Programming</a>\r\n </li>\r\n <li>\r\n <a href="#">YouTube</a>\r\n </li>\r\n <li>\r\n <a href="#">Other</a>\r\n </li>\r\n </ul>\r\n </li>\r\n <li>\r\n <a href="schedule.html">Schedule</a>\r\n </li>\r\n <li class="current-item">\r\n <a href="#">\r\n <p class="rusty">RedstoneGaming</p>\r\n </a>\r\n </li>\r\n <li>\r\n <a href="equipment.html">Equipment</a>\r\n </li>\r\n <li>\r\n <a href="contact.html">Contact Me</a>\r\n </li>\r\n <li class="login">\r\n <a href="login.html">Login/Sign Up</a>\r\n </li>\r\n </ul>\r\n </nav>\r\n </div>\r\n <div class="content">\r\n <h1 class="rusty title">ThatRedstoneGuy's Feed</h1>\r\n <div class="feed-column">\r\n <h1 style="font-size: 3vh;" class="rusty text-center">Colortone | Am I colorblind?! | W/Voiceless</h1>\r\n <div class="video-container">\r\n <iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>\r\n </div>\r\n </div>\r\n <div class="feed-column">\r\n\t </div>\r\n </div>\r\n </body>\r\n</html>您<body class="background">覆盖了.contentdiv，因为您z-index: -1;的 css 文件中有内容类。您应该可以安全地将其删除，如果没有，则将其更改为 1 并添加z-index: 2;到您的.menubar类中。
您可以在 Firefox 或 Chrome 中使用开发人员工具 Inspect Element 来查看页面在浏览器中呈现时的布局。
编辑：
玩了一段时间后，我找到了解决方案。z 索引与位置是静态的还是相对/绝对的有一些我不完全理解的关系。因此，经过实验，我能够通过添加position: relative;到.menubar类中来使菜单正常工作。
| 归档时间： |
|
| 查看次数： |
15539 次 |
| 最近记录： |