css如何让div吸附 |css的含义和功能

Sidebar
Main Content
.container {
display: flex;
}
.sidebar {
width: 200px;
background-color: #eee;
position: sticky;
top: 0;
height: 100vh;
}
.main-content {
flex: 1;
background-color: #fff;
height: 2000px;
}

代码中使用了flex布局，将两个子元素进行水平排列。其中，侧边栏的宽度为200px，使用了position: sticky属性，使其在滚动时吸附在屏幕顶部并且保持位置不变。主内容区域使用了flex: 1属性，使其占据剩余的空间。

除了position: sticky之外，还有一些其他的实现方式。

第一个是使用position: fixed属性，这个属性会将元素固定在屏幕指定位置。但是这种方式需要指定固定位置的坐标，不太灵活。

另一个是使用margin-top属性，这种方式将要吸附的元素与指定位置的元素之间添加一个合适的距离，使得它们吸附起来。但是这种方式在屏幕大小改变时可能产生问题。

综上，使用position: sticky是最好的实现方式，但需要注意浏览器的兼容性。如果需要兼容旧版本浏览器，可以考虑使用其他的方式。