materialize cssを使用してページのボタンに新しいdivスティックを開く方法は？

Question

新しいポップアップウィンドウは、常にページの右下に固定幅/高さでストックされ、必要に応じて右の列と重なり合っているようにしたい。

Here is the jsfiddle：

<main> 
    <div class="container"> 
    <div class="row"> 
     <div class="col s6"> 
     <p>Lorem ipsum dolor sit amet, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
     <div class="col s6"> 




     <button href="#" class="clickme">Click Me</button> 
     <div class="box"> 
      Lorem Ipsum is simply dummy consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
     </div> 
    </div> 
    </div> 
</main> 

<footer class="page-footer"> 

</footer> 

CSS：

.box { 
    background-color: #ccc; 
    border-radius: 4px; 
    color: #333; 
    margin: 5px 0; 

} 

私は.boxクラスと異なるトリックを試みたが成功しなかったので、あなたの助けに感謝。

Answer 1

私はあなたを正しく理解しているかわかりません。

.box { 
    background-color: #ccc; 
    border-radius: 4px; 
    color: #333; 
    margin: 5px 0; 

    position: fixed; 
    bottom: 0; 
    right: 0; 
    width: 200px; 
    height: 200px; 
}