Question

当用户滚动左列时，我希望右列保持绝对位置。我试图模仿我在stackoverflow和google上找到的每个“解决方案”，但大多数都是旧的，没有人能做到这一点。

这是我的标记：

   <div className="wrapper wrapper-content animated">
          <div className="row">
            <div className="col-lg-4 col-xl-4">
              { this.props.showController ? <ModelChartController handleChange={ this.handleChange } handleSavedUntilRetirementChange={ this.handleSavedUntilRetirementChange } handleSavedAfterRetirementChange={ this.handleSavedAfterRetirementChange }
                                              {...this.state} /> : null }
            </div>
            <div className="col-lg-8 col-xl-8">
              <div className="absolute-wrapper">
                <div className="maintainPosition">
                  <ResponsiveContainer width='100%' aspect={ 21.0 / 9.0 }>
                    <LineChart data={ this.state.data } margin={ { top: 5, right: 30, left: 20, bottom: 5 } }>
                      <XAxis dataKey="Age" />
                      <YAxis dataKey="Total" />
                      <CartesianGrid strokeDasharray="3 3" />
                      <Tooltip/>
                      <Legend />
                      <Line type="monotone" dataKey="Non-Retirement" stroke="#8884d8" />
                      <Line type="monotone" dataKey="Retirement" stroke="#82aeca" />
                      <Line type="monotone" dataKey="Total" stroke="#82ca9d" activeDot={ { r: 8 } } />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              </div>
            </div>
          </div>
        </div>

这是CSS

.absolute-wrapper {
   position: relative;
}

@media (min-width: 768px) { 
  .maintainPosition {
      position: absolute;
      top: 0;
  }
}

Answer 1

首先，您不需要.absolute-wrapper和.maintainPosition div只是为了定位（不确定您是否需要其他样式）。

2列是＆＃34; col-lg-4 col-xl-4＆＃34; （左栏）和＆＃34; col-lg-8 col-xl-8＆＃34; （右栏）并且在这些div上运行CSS是合适的。

您需要附加另一个类名，或者像这样为这些div指定一个ID：

追加班级名称：

<div className="col-lg-4 col-xl-4 leftColumn">
...
</div>

<div className="col-lg-8 col-xl-8 rightColumn">
...
</div>

类的CSS：

.leftColumn {}
.rightColumn {
 position: absolute;
 right: 0;
 top: 0;
}

添加ID：

<div className="col-lg-4 col-xl-4" id="leftColumn">
...
</div>

<div className="col-lg-8 col-xl-8" id="rightColumn">
...
</div>

ID的CSS：

#leftColumn {}
#rightColumn {
 position: absolute;
 right: 0;
 top: 0;
}

如果这不能解决您的问题，请尝试使用position: fixed;（相对于视口）而不是position: absolute;（相对于父级）。这详细解释了事情：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Bootstrap列内的固定或绝对位置

1 个答案: