引导列内的固定或绝对位置

我希望在用户滚动左列时让右列保持绝对定位。我试图模仿我在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; 
    } 
}

来源

2017-10-11 Dylan Pearson

这是什么语言？它既不是原始的HTML，也不是原始的Bootstrap。这是'ReactJS'吗？ –

是的，它是一个React组件。 –

首先，你不需要.absolute，包装和.maintainPosition的div只是定位（不知道你是否需要他们为其他风格）。这两列是“col-lg-4 col-xl-4”（左栏）和“col-lg-8 col-xl-8”（右栏），因此在CSS上运行CSS是合适的。这些div。

您需要可以追加其他类名或ID分配给这些div像这样：

追加类别名称：

<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; 
}

Add Id：

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

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

CSS的IDS：

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

如果不解决，你在找什么，请尝试使用position: fixed;（相对于视），而不是position: absolute;（相对于父）。这很详细地解释了这些事情：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

来源

2017-10-11 02:31:52

引导列内的固定或绝对位置

回答

相关问题