CSS位置元素“固定”里面滚动容器 [英] CSS position element "fixed" inside scrolling container

问题描述

我正在寻找一种解决方案将一个元素附加到滚动容器的顶部

我想知道是否有人找到了解决方案？

HTML：

 < div class =container> 
< div class =header> title< / div> 
< div class =element> ......< / div> 
 ...（约10-20个元素）... 
< div class =element> ......< / div> 
< / div> 
  

所有元素都有 position：relative ，

该容器具有以下CSS：

  .container { 
职位：亲属; 
 width：200px; 
 height：400px; 
 overflow-y：scroll; 
} 
  

我希望标题保留在容器之上，与滚动无关位置和元素在下面滚动。

到目前为止：

  .header {
 position：absolute; / *滚动出视图:-( * / 
 z-index：2; 
 background-color：#fff; 
} 
 .element {
 position：相对; 
} 
  

所有元素都是块元素，我无法将标题移出
jquery在这一点上是没有选择的。

解决方案

我认为您的解决方案通过 position：sticky 。看起来就像 position：fixed ，但是尊重他父母的相对位置。

不幸的是，这是一个实验性功能，并且只在Chromium中支持。您可以在这个测试页面。

纯粹的css解决方案出现在我脑海里，只是标记稍作改动。

 < div class =cont_elements> $ b $可以为元素设置一个容器b< div class =element> ... ...< / DIV> 
 ..... 
< / div> 
  

然后给这个内部容器添加溢出。现在，你的标题贴在顶部。

这是一个工作演示。

i wonder if anyone has found a solution for this?

i am looking for a solution to attach an element to the top of a scrolling container

HTML:

<div class="container">
  <div class="header">title</div>
  <div class="element">......</div>
  ... (about 10-20 elements) ...
  <div class="element">......</div> 
</div>

all "elements" have position:relative,

the container has the following CSS:

.container {
  position:relative;
  width:200px;
  height:400px;
  overflow-y:scroll;
}

i want the header to stay on top of the container, independant of its scrolling position and the elements scrolling underneath.

the CSS so far:

.header {
  position:absolute; /* scrolling out of view :-( */
  z-index:2;
  background-color:#fff;
}
.element{
  position: relative;
}

all elements are block elements, and i can not move the header outside of the container. jquery is no option at this point.

解决方案

I think your solution pass with position:sticky. Seems it's like position:fixed but respects the relative position to his parent.

Unfortunately this is an experimental feature, and is only supported in Chromium. You can see more details in this test page.

The pure css solution that comes into my mind is with a little change of the markup. You can set a container only for the "elements" as this:

<div class="cont_elements">
      <div class="element">......</div>
      .....
</div>

And give the overflow to this inner container. Now, your header sticks at top.

Here's a working demo.

这篇关于CSS位置元素“固定”里面滚动容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！