Html CSS3-粘性位置不工作
我试图在标题部分下创建导航菜单,但无法正常工作,以下是我的css代码:Html CSS3-粘性位置不工作,html,css,Html,Css,我试图在标题部分下创建导航菜单,但无法正常工作,以下是我的css代码: body{ } header{ position: relative; top: 0px; left: 0px; height: 100px; width: 100%; background-color: whitesmoke; text-align: left; float: left; padding: 5px; z-index:1
body{
}
header{
position: relative;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: whitesmoke;
text-align: left;
float: left;
padding: 5px;
z-index:100;
}
#logo{
position: relative;
height: 85px;
width: 120px;
/*border: 1px solid black;*/
float: left;
background-image: url('logoArdi.svg');
background-position: center;
background-size: contain;
}
#judulWeb{
position: relative;
height: 85px;
width: 200px;
text-align: center;
float: left;
}
#kontak{
position: inherit;
float: right;
height: 100px;
top: 20px;
right: 10px;
}
.imghead{
margin: auto 5px auto auto;
}
.sticky{
position: sticky;
position: -webkit-sticky;
position: -o-sticky;
top: 0px;
float: left;
width: 100%;
height:30px;
background-color: #26282b;
text-align: center;
box-shadow: 0px 2px 10px #26282b;
}
ul li{
position:relative;
bottom:11px;
display: inline-block;
margin: auto 30px auto auto;
}
ul li{
color:whitesmoke;
/*background-color:black;
border-radius: 5px 5px 0px 0px;
padding: 5px;*/
}
ul li:hover{
color:#26282b;
background-color: whitesmoke ;
}
#kontak{
position: inherit;
float: right;
height: 100px;
}
#wrapper{
position: relative;
top: 132px;
width: 80%;
float: left;
margin-right: 10%;
margin-left: 10%;
text-align: center;
background-color: transparent;
}
.imgutama{
width: 200px;
}
我现在没有错,但我只是想创建页眉和导航,导航位于页眉下方,即使我向下滚动,导航也会贴在顶部
注意:导航类是“粘性”的。您的答案(还)没有帮助。问题位置没有侧边栏:只有在firefox和safari中才有粘性工作。()这不是最好的解决方案,然后我就只能使用javascript了:)谢谢你的链接!如果您已经解决了问题,您可以自己发布答案,并选择它作为已接受的答案。我们在标题中没有“解决”这个词。我刚刚创建了这个解决方案。这很简单。过来看。也许会对你有帮助。
#sidebar {
position: -webkit-sticky; // required for Safari
position: sticky;
top: 0; // required as well.
}