複数の位置を使用することができますか：同じページで固定

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

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

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

私は、これはあなたが...