我可以使用多个位置：固定在同一页面中

Question

我需要为多个容器使用固定内容，能帮助我实现这个目的。

以下是示例代码。

我需要每个容器都有自己的固定元素，不应该滚动到容器之外。

#cf1, #cf2{
  position:fixed;
  top:0;
  left:0;
}

#content2, #content1{
  border: 1px solid red;
  height: 100px;
  overflow-y:scroll;
  position:absoulte;
}

<div id="body">
  <div id="content1">
     Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
     1) Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    
    <div id="cf1">
      test
    </div>
  </div>
  <div id="content2">
     1) Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
     1) Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    <br /> Lorum Ipsum Dolor Sit Amet
    
    <div id="cf2">
      test22222
    </div>
  </div>  
</div>

提前致谢。

Answer 1

＆＃13;

＆＃13;

#cf1, #cf2{
  position: absolute;
  top:0;
  left:0;
}

#content2, #content1{
  border: 1px solid red;
  height: 100px;
  overflow-y: scroll;
  position: relative;
}

.container {
  position: relative;
  display: block;
}

＆＃13;

<div id="body">
   <div class="container">
      <div id="content1">
         Lorum Ipsum Dolor Sit Amet
        <br /> Lorum Ipsum Dolor Sit Amet
        <br /> Lorum Ipsum Dolor Sit Amet
        <br /> Lorum Ipsum Dolor Sit Amet
        <br /> Lorum Ipsum Dolor Sit Amet
         1) Lorum Ipsum Dolor Sit Amet
        <br /> Lorum Ipsum Dolor Sit Amet
        <br /> Lorum Ipsum Dolor Sit Amet
        <br /> Lorum Ipsum Dolor Sit Amet
        <br /> Lorum Ipsum Dolor Sit Amet
      </div>
      <div id="cf1">
        test
      </div>
  </div>
  <div class="container"> 
    <div id="content2">
       1) Lorum Ipsum Dolor Sit Amet
      <br /> Lorum Ipsum Dolor Sit Amet
      <br /> Lorum Ipsum Dolor Sit Amet
      <br /> Lorum Ipsum Dolor Sit Amet
      <br /> Lorum Ipsum Dolor Sit Amet
       1) Lorum Ipsum Dolor Sit Amet
      <br /> Lorum Ipsum Dolor Sit Amet
      <br /> Lorum Ipsum Dolor Sit Amet
      <br /> Lorum Ipsum Dolor Sit Amet
      <br /> Lorum Ipsum Dolor Sit Amet
    </div>
    <div id="cf2">
      test22222
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我认为这就是你要找的......