css - 如何使用 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 类出现在底部，你可以试试这个:

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

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