用纯CSS实现吸顶效果

最新推荐文章于 2023-12-27 11:17:47 发布

门门men

最新推荐文章于 2023-12-27 11:17:47 发布

阅读量687

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Menqq/article/details/115295527

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

HTML

<div class="header">

</div>
<nav>
   吸顶的头
</nav>
<div class="content">

</div>
<footer>
    底部
</footer>

CSS

.header {
	width:100%;
	height:160px;
	background:#87CEEB;
}
nav {
	width:100%;
	height:100px;
	position:sticky;
	top:0px;
	background:#F98202;
}
.content {
	width:100%;
	background:blue;
	height:1000px;
}
footer {
	background:#87CEEB;
}

{
position: static; /默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。/
position: relative; /生成相对定位的元素，相对于其正常位置进行定位。/
position: absolute; /生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。/
position: fixed; /生成绝对定位的元素，相对于浏览器窗口进行定位。/
position: inherit; /规定应该从父元素继承 position 属性的值。/
position: initial; /关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）/
position: unset; /关键字我们可以简单理解为不设置。其实，它是关键字 initial 和 inherit 的组合。/
position: sticky; /它可以通过指示偏移量来实现“粘性”/
}