html - 3 列模板修复的问题

Question

我正在尝试制作一个包含 3 列的模板。我想“定位:固定”侧边栏。但有一个问题。当您单击 jsfiddle 链接时，您可以了解问题。请帮助我。

此处:JSFiddle

代码:

.a {
  background: #607d8b;
  padding: 15px;
}

.b {
  background: #03a9f4;
  float: left;
  position: fixed;
}

.c {
  background: #673ab7;
  width: 400px;
  margin: 0 auto;
}

.d {
  background: #4caf50;
  float: right;
  position: fixed;
}

<div class="a">
  <div class="b">fixed and floating left</div>
  <div class="c">center<div style="height:500px"></div></div>
  <div class="d">fixed and floating right</div>
</div>

Answer 1

.a {
  background: #607d8b;
  padding: 15px;
  position: relative;
}

.b {
  background: #03a9f4;
  float: left;
  position: fixed;
}

.c {
  background: #673ab7;
  width: 400px;
  margin: 0 auto;
}

.d {
  background: #4caf50;
  right: 10px;
  top: 10px;
  position: fixed;
}

<div class="a">
  <div class="b">fixed and floating left</div>
  <div class="c">center<div style="height:500px"></div></div>
  <div class="d">fixed and floating right</div>
</div>

试着这样改变。

.a {
  background: #607d8b;
  padding: 15px;
  position: relative;
}

.d {
  background: #4caf50;
  right: 10px;
  top: 10px;
  position: fixed;
}

当你使用position: fixed时，你应该使用with top,bottom,left,对。