css - 相对于父元素的固定元素

Question

我包含了一个代码片段，我试图定位页眉和页脚，使其位于 .main div 中。

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

在这个特定的布局中，如果没有 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

正如我在评论中所写的那样，固定宽度计入视口(viewport)，而不是父元素。但是您可以将 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>