本文详细解析了如何使用CSS fixed定位创建一个固定的顶部导航栏，包括设置position:fixed属性、元素覆盖与布局调整，适合前端开发者理解和实践。通过实例展示，理解固定定位在响应式设计中的应用。
固定定位 position:fixed
固定定位是相对与浏览器窗口来定位, 就算页面滚动, 固定定位元素的位置不会变
固定定位元素脱离了标准文档流, 会雅盖主标准文档流里的元素
固定定位元素不再占用空间
p.one {
position: fixed;
left: 5px;
top: 5px;
}
p.two {
position: fixed;
top: 30px;
right: 5px;
}
一些文本。
更多的文本。
image
顶部导航栏实例
Document{
margin:0;
padding: 0;
}
.nav{
width:100%;
height:60px;
background-color: cornflowerblue;
/固定定位*/
position:fixed;
left:0px;
top:0px;
}
.nav .inner_c{
width:1000px;
height: 60px;
margin:0px auto;
}
ul{
list-style: none;
}
ul li{
float:left;
width:100px;
height:60px;
line-height: 60px;
text-align: center;
}
ul li a{
display: block;
width:100px;
height: 60px;
text-decoration: none;
color:white;
font-weight: bold;
}
ul li a:hover{
background-color: gold;
}
image
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
