CSS 布局属性优化技巧：position sticky 和 flexbox

<div class="container">
   <div class="header">
      <h1>这是一个顶部导航栏</h1>
   </div>
   <div class="content">
      <p>这是页面的主要内容</p>
   </div>
   <div class="sidebar">
      <p>这是一个侧边栏，可以在滚动时固定在页面</p>
   </div>
</div>

.container {
   height: 800px; 
   position: relative;
}

.header {
   background-color: #f1f1f1;
   padding: 20px;
}

.sidebar {
   width: 200px;
   position: sticky;
   top: 100px;
}

.content {
   padding: 20px;
}

<div class="container">
   <div class="header">
      <h1>这是一个顶部导航栏</h1>
   </div>
   <div class="content">
      <div class="sidebar">
         <p>这是一个侧边栏</p>
      </div>
      <div class="main">
         <p>这是页面的主要内容</p>
      </div>
   </div>
</div>

.container {
   display: flex;
   flex-direction: column;
   height: 800px;
}

.header {
   background-color: #f1f1f1;
   padding: 20px;
}

.content {
   display: flex;
   flex: 1;
}

.sidebar {
   width: 200px;
   background-color: #f9f9f9;
   padding: 20px;
}

.main {
   flex: 1;
   padding: 20px;
}