【发布时间】:2020-01-08 00:05:21
【问题描述】:
我一直在为一个 uni 项目开发我的第一个网站,在我的 CSS(或我的 HTML,不太确定)中遇到了一个非常奇怪的错误,这意味着我拥有的页面顶部有一个粘性导航栏现在正常工作将在我网站所有 3 个页面顶部附近的随机点取消粘贴并显示“位置:相对”属性。
在使用两个大于和小于 512 像素的 @media(最大宽度/最小宽度)文章向网站添加响应功能后,我注意到了这个错误
在父容器和本机容器中尝试过不同的溢出,但没有成功,只会进一步破坏它。
当前和错误格式的网页在此处在线: http://db814.brighton.domains/ci435/learningJournal.html
这里是相关的 HTML 和 CSS sn-ps,
<div class="desktop-menu">
<ul id="page-links">
<li class="active" ><a href="learningJournal.html">Learning Journal</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
@media (min-width: 512px) {
.desktop-menu {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:1;
}
.desktop-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #AEA79F;
overflow: hidden;
width: 100%;
bottom 0;
}
.desktop-menu li {
float: left;
}
.desktop-menu a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.desktop-menu a:hover {
color: #E95420;
}
.mobile-menu {
display: none;
}
【问题讨论】:
标签: html css css-position sticky