如何使用materialize css打开新的div到页面按钮？

Question

我希望新的弹出窗口始终显示在页面右下方，具有固定的宽度/高度，并在必要时与右侧col重叠。

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类出现在底部，可以尝试：

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

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