固定元素相对于父

Question

我包含了一个代码段，我正在尝试定位标题和页脚，以便它在.main Div。

我不知道为什么这不起作用。相反，它跨越了整个视口。

在这个特定的布局中，如果没有JavaScript，我无法确定父母的左位，我希望将其保留在CSS。

标题和页脚应与滚动时保持在同一位置。

.main {
  position: absolute;
  left: 60px;
  right: 0px;
  top: 0px;
  height: 50000px;
  background-color: #09f;
}
.parent {
  position: relative:
  width: 100%;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f00;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f00;
}

<div class="main">
  <div class="parent">
    <div class="header">
      <h3>header</h3>
    </div>
    <div class="footer">
      <h3>footer</h3>
    </div>
  </div>
</div>

感谢提前的任何帮助，杰米

Answer 1

正如我在问题下的评论中所写的那样，固定宽度被计为视口，而不是父元素。但是您可以将left: 60px（与内容相同的值设置为固定元素相同）。

.main {
  position: absolute;
  left: 60px;
  right: 0px;
  top: 0px;
  height: 50000px;
  background-color: #09f;
}
.parent {
  position: relative:
  width: 100%;
}
.header {
  position: fixed;
  top: 0;
  left: 60px;
  right: 0;
  background-color: #f00;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 60px;
  right: 0;
  background-color: #f00;
}

<div class="main">
  <div class="parent">
    <div class="header">
      <h3>header</h3>
    </div>
    <div class="footer">
      <h3>footer</h3>
    </div>
  </div>
</div>