Question

我想象CSS在我的示例中看起来不合适，但是这些样式是通过库添加的，尤其是#top，#middle，#bottom中的样式。我需要.header元素来坚持。

我尝试过各种样式，但没有运气。随意覆盖或添加任何样式。如何使用我拥有的HTML结构使之工作？

#top {
  display: flex;
  position: relative;
  z-index: 0;
  overflow: hidden !important;
  max-height: 300px;
  max-width: 300px;
  border: 2px dashed #ec6161;
}
#middle {
  padding-right: 19px;
  margin-bottom: -34px;
  overflow: scroll;
  overflow-x: hidden !important;
  min-width: 100%! important;
  max-height: inherit !important;
  box-sizing: content-box !important;
}
#bottom {
  padding-bottom: 17px;
  margin-right: -19px;
  overflow: scroll;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
  min-height: 100% !important;
}

.header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eee;
  padding: 5px 7px;
  font-weight: bold;
}
.content {
  height: 100px;
  padding: 5px 7px;
}

<div id="top">
  <div id ="middle">
    <div id="bottom">
    
      <div>
      
        <div>  
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Content</div>
        </div>
        
      </div>
      
    </div>
  </div>
</div>

也：https://jsfiddle.net/bkn0e3gL/2/

Answer 1

在任何父div上设置overflow: hidden似乎是造成此问题的原因。

签出this answer：

如果您将sticky元素的任何祖先上的overflow设置为hidden，则该祖先元素将成为sticky元素的滚动容器。

.header {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

.content {
  min-height: 200px;
}

#bottom {
  padding-bottom: 17px;
  margin-right: -19px; //overflow: scroll;
  //overflow-y: hidden !important;
  box-sizing: border-box !important;
  min-height: 100% !important;
}

#middle {
  padding-right: 19px;
  margin-bottom: -34px; //overflow: scroll;
  //overflow-x: hidden !important;
  min-width: 100% ! important;
  max-height: inherit !important;
  box-sizing: content-box !important;
}

#top {
  display: flex;
  position: relative;
  z-index: 0;
  //overflow: hidden !important;
  max-height: 300px;
  max-width: 300px;
  border: 2px dashed #ec6161;
}

<div id="top">
  <div id="middle">
    <div id="bottom">
      <div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
      </div>
    </div>
  </div>
</div>

如何在这种结构下使位置保持不变？

1 个答案: