css制作固定模板
使用CSS创建固定模板的方法
固定模板通常指页面布局中某些元素（如导航栏、页脚）位置固定，不随滚动条移动。以下是几种实现方式：
固定定位（Fixed Positioning）
通过position: fixed属性将元素固定在视口的特定位置：
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #333;
z-index: 1000;
}粘性定位（Sticky Positioning） 结合相对定位和固定定位的特性，元素在到达特定位置时变为固定：
.sidebar {
position: sticky;
top: 20px;
height: 100vh;
}网格布局（Grid Layout） 使用CSS Grid划分固定区域和可滚动区域：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content";
grid-template-rows: 80px 1fr;
grid-template-columns: 200px 1fr;
height: 100vh;
}
.header { grid-area: header; position: fixed; }弹性盒子（Flexbox） 通过Flexbox实现固定高度和自适应区域：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content {
flex: 1;
margin-top: 80px; /* 补偿固定头部高度 */
}视口单位（Viewport Units） 利用vh/vw单位控制固定元素尺寸：
.footer {
position: fixed;
bottom: 0;
width: 100vw;
height: 10vh;
}实际应用注意事项
- 固定元素会脱离文档流，需为内容区域添加margin/padding避免遮挡
- 移动端需考虑
viewport元标签和iOS的视口高度差异 - 高优先级使用
will-change: transform优化固定元素的渲染性能 - 多层级固定元素时注意
z-index的堆叠顺序
示例完整模板结构：
<div class="header">固定头部</div>
<div class="sidebar">固定侧栏</div>
<main class="content">可滚动内容</main>
<div class="footer">固定页脚</div>
