我正在尝试有两列,一个是可以扩展并与另一列重叠的菜单.但是我使用了一个flex元素来包装这些列,我的菜单扩展到了另一个元素后面,即使有更大的元素z-index.
渲染是这样的:
.main {
font-family: 'Open Sans', Helvetica, sans-serif;
display: flex;
background-color: #99baef;
}
nav {
height: 100%;
width: 8em;
background-color: black;
z-index: 1;
}
.navbox {
box-sizing: border-box;
background-color: black;
color: white;
height: 4em;
width: 100%;
text-align: center;
line-height: 4em;
border-top: 1px dotted #99baef;
transition: all 1s;
}
.navbox:hover {
width: 130%;
border-top: none;
background-color: #4a77c4;
color: black;
}
.container {
padding: 1em;
}
a {text-decoration: inherit;}Run Code Online (Sandbox Code Playgroud)
<div class="main">
<div class="maincolumn">
<nav>
<a href="">
<div …Run Code Online (Sandbox Code Playgroud)我正在开发一个 React 应用程序,使用 Netlify 在提交时自动构建和部署应用程序。问题是,每当在生产中部署新版本时,客户端都会面临一个带有以下错误的空白页面:
\n\n\n\n当导航器首次加载网站时,不会发生这种情况,只有在新构建后才会发生。重新加载几次后,问题就消失了,网站运行正常。因此我认为这与缓存有关。
\n\n另外,我没有\xe2\x80\x99t 设法在本地重现该错误。这仅在 Netlify 部署后发生。
\n\n索引.html:
\n\n<!DOCTYPE html>\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8">\r\n <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">\r\n <meta name="theme-color" content="#000000">\r\n <link rel="manifest" href="%PUBLIC_URL%/manifest.json">\r\n <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">\r\n <script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>\r\n <title>Sensuba</title>\r\n</head>\r\n<body>\r\n <noscript>\r\n You need to enable JavaScript to run this app.\r\n </noscript>\r\n <div id="root"></div>\r\n\r\n </body>\r\n</html>Run Code Online (Sandbox Code Playgroud)\r\n清单.json:
\n\n{\n"short_name": "Sensuba",\n"name": "Sensuba",\n"icons": [\n{\n "src": "favicon.ico",\n "sizes": "64x64 32x32 24x24 16x16",\n "type": "image/x-icon"\n}\n],\n"start_url": "./index.html",\n"display": "standalone",\n"theme_color": "#000000",\n"background_color": …Run Code Online (Sandbox Code Playgroud)