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时，您应该使用top，bottom，left，right。