CSS位置固定与相对父级相同的大小答案

【问题标题】：CSS position fixed same size as relative parentCSS位置固定与相对父级相同的大小
【发布时间】：2018-03-24 02:37:46
【问题描述】：

我想要一个粘性部分，当用户滚动页面时，它在顶部有一个固定的位置。

如果我将宽度设置为粘性容器的 100%，它会溢出父 div 容器。即使我调整浏览器的大小，宽度也应该完全相同。

你可以在这里看到我的问题：https://jsfiddle.net/d49tyfo2/2/

body {
  padding: 50px;
}
#d-header {
  height: 400px;
  position: relative;
  padding-bottom: 55px;
  background-color: blue;
  margin-bottom: 0px !important;
  box-shadow: 2px 5px 3px 0 rgba(0,0,0,0.16);
  z-index: 1;
}

.tab-container {
  position: absolute;
  width: 100%;
  bottom: 10px;
  height: 55px;
  letter-spacing: 1px;
}

.tabs {
    background-color: orange;
    color: white;
    text-transform: uppercase;
    width: 26.8%;
    height: 50px;
    line-height: 50px;
    float: left;
    text-align: center;
    margin-left: 10px;
  }

.date {
  position: absolute;
  font-size: 72px;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 65px;
}

.header-sticky {
  position: fixed;
  top: 83px;
  width: 100%;
  height: 205px;
  background-color: white;
  box-shadow: 0 5px 4px 0 rgba(0,0,0,0.16),0 0px 0px 0 rgba(0,0,0,0.12);
  border: 1px solid black;
}

<body>
<div class="myHeader" id="d-header">
        <div class="special-headline-wrap" style="width: 526px;">
            <h1 class="special js-done">HEADLINE</h1>
        </div>
        <p>Aenean lacinia nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>

        <div id="date-tab-wrapper" class="header-sticky">
            <div class="date">2017</div>

            <div class="tab-container">
                <div class="tabs" style="margin-left: 9.1%;">Tab 1</div>
                <div class="tabs">Tab 2</div>
                <div class="tabs">Tab 3</div>
            </div>
        </div>
    </div>
</body>

我在这里缺少什么？

【问题讨论】：

好吧，如果它粘在屏幕上的某个位置，它总是会以某种方式溢出其他内容。我不完全理解您要达到的目标。 what 的宽度应该始终相同？
@mumpitz 'date-tab-wrapper' 的宽度（固定）应该和 'd-header' 一样
是的，很确定你不能那样做。固定位置元素总是与视口相关并忽略任何父宽度等。也许position:sticky 可能是一个选项。否则，您可能需要 JS。
见 - stackoverflow.com/questions/5873565/…
和 - stackoverflow.com/questions/17806852/…

标签： html css

【解决方案1】：

position: fixed 的元素将从文档流中移除，因此不受其父容器的约束。来自 CSS 技巧：

position: fixed - 元素像绝对定位元素一样从文档流中移除。事实上，它们的行为几乎相同，只有固定定位的元素始终相对于文档，而不是任何特定的父元素，并且不受滚动影响。

【讨论】：