CSS学习笔记(七) 粘性布局
<p>粘性布局是什么呢？我们先来看看效果演示</p><p><img src="https://img2018.cnblogs.com/blog/1459925/201909/1459925-20190903204555349-1369732024.gif"></p>
<p>没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的 <strong>吸附效果</strong></p>
<p>这样的效果究竟是如何实现的呢？很简单，只要使用 <code>position: sticky</code> 即可，一份简单的示例代码如下：</p>
<pre><code class="language-html"><!DOCTYPE HTML>
<html>
<head>
<style>
.header {
background-color: black;
color: white;
text-align: center;
font-size: 36px;
line-height: 72px;
/* 实现吸附效果 */
position: sticky; /* 设置 position 为 sticky */
top: 0px; /* 设置 top、right、bottom、left 属性中的至少一个 */
}
.container {
background-color: gray;
color: white;
font-size: 24px;
line-height: 48px;
white-space: pre;
}
</style>
</head>
<body>
<div class="header">这是固定的标题</div>
<div class="container">
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
</div>
</body>
</html>
</code></pre>
<p>一个设置 position 为 sticky 的元素，它的样式表现如下：</p>
<ul>
<li>当元素在页面视图内时，position 属性的值相当于 relative</li>
<li>当元素超出页面视图时，position 属性的值相当于 fixed</li>
</ul>
<p>【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】</p>
</div>
<div id="MySignature" role="contentinfo">
版权声明：本博客属于个人维护博客，未经博主允许不得转载其中文章。<br><br>
来源：https://www.cnblogs.com/wsmrzx/p/11455536.html
頁:
[1]