Question

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

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

您可以在此处查看我的问题：https://jsfiddle.net/d49tyfo2/2/

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我在这里缺少什么？

Answer 1

Elements that are position: fixed are removed from the document flow, and are therefore not subject to their parent containers. From CSS Tricks:

position: fixed - the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.

CSS位置与相对父级的大小相同

1 个答案: