我希望我的 .nav
固定下来并随您向下滚动页面,但我不知道如何阻止它在 position: fixed; 时乱七八糟;放入。
JSFIDDLE without position:fixed
<div class="top">
<p id="day"></p>
<script> {
var d = new Date();
var n = d.getDate();
document.getElementById("day").innerHTML = n;
}
</script>
/
<p id="month"></p>
<script> {
var d = new Date();
var n = d.getMonth();
document.getElementById("month").innerHTML = n;
}
</script>
/
<p id="year"></p>
<script> {
var d = new Date();
var n = d.getYear();
document.getElementById("year").innerHTML = n-100;
}
</script>
//
J O H N SM I T H
</div>
<div class="nav">
<ul>
<li><a href="#">C O N A C T</a></li>
<li><a href="#">A B O U T</a></li>
<li><a href="example2.html">H O M E</a></li>
</ul>
</div>
<div class="main">
This is my website.
</div>
如何实现“固定”我想我可能做错了。
.top {
background-color: #333333;
opacity:0.85;
padding: 16px;
color: white;
font-family: Lato;
font-size: 16px;
vertical-align: middle;
margin: 0;
position: fixed;
width: 100%; }
.top p {
display: inline; }
.nav {
top: 0;
left: 0;
position: fixed; }
.nav li {
list-style-type: none;
z-index: 1;
position: relative;
width: 115px;
margin-right: 40px;
text-align: center;
float: right;
right: 20px; }
.nav a {
display: inline-block;
padding: 15.5px;
text-decoration: none;
color: white;
font-family: Lato;
opacity: 0.6; }
最佳答案
它适用于 position: fixed
但您需要设置 right
而不是 left
。
.nav {position: fixed; top: 0; right: 0;}
.nav ul {margin-top: 0;}
关于html - 位置:固定;对我的 CSS 菜单做了一些时髦的事情,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28449007/