css 固定左右位置不动上下可以动

如果你想让一个元素在页面上固定左右位置不动，同时允许其上下可以随着页面滚动而移动，实际上这是固定定位(position: fixed;)的一个特例，因为固定定位默认会让元素在水平和垂直方向都固定不动。但是，要达到你描述的效果，可以通过一些技巧来实现，主要是利用绝对定位(position: absolute;)结合相对定位的父元素来间接实现这一需求。

方法1: 绝对定位 + 相对定位的父元素

1. 设置父元素为相对定位: 这使得子元素可以相对于父元素进行定位。

   .parent {
     position: relative;
     /* 确保父元素的高度和宽度足以包裹内容 */
   }
   

2. 设置子元素为绝对定位: 并且指定左右位置为0，这样它就会紧贴父元素的左右两边，同时允许上下自然滚动。

   .child {
     position: absolute;
     left: 0; /* 固定在父元素的左边 */
     right: 0; /* 固定在父元素的右边 */
     /* 上下位置根据内容或需要设定，例如： */
     top: 20px; /* 自定义上边距 */
     /* 或者不设置上下位置，让其随内容流动 */
   }
   

方法2: 使用Flexbox或Grid布局

虽然这种方法不是直接解决固定左右位置的问题，但你可以通过Flexbox或Grid布局来创建类似的视觉效果，同时保持元素内容的自然滚动。

Flexbox示例:

.parent {
  display: flex;
  /* 确保父元素充满整个视口或需要的高度 */
}

.child {
  /* 为了让元素填充可用空间并随内容滚动，可以不设置固定宽度 */
  flex: 0 0 auto; /* 或者根据需要调整flex属性 */
  /* 内容超出时允许滚动 */
  overflow-y: auto;
}

Grid布局示例:

.parent {
  display: grid;
  grid-template-columns: 1fr; /* 让内容区域占据剩余空间 */
}

.child {
  /* 内容超出时允许滚动 */
  overflow-y: auto;
}

这两种布局方式下，元素的左右边界会跟随父元素的边界，而上下滚动则取决于内容的高度和是否启用了滚动条。

请根据你的具体场景选择合适的方法来实现。