Page Canvas
position: fixed
Code
<div class="onoffcanvas is-fixed is-top" id="cft" aria-expanded=false>
<h1>Top Canvas</h1>
<a href="#cft" class="onoffcanvas-toggler" data-toggle=onoffcanvas aria-expanded="false" style="width:100px; height:100px;"></a>
</div>
<div class="onoffcanvas is-fixed is-right" id="cfr">
<h1>Right Canvas</h1>
<a href="#cfr" class="onoffcanvas-toggler" data-toggle=onoffcanvas aria-expanded="false" style="width:100px; height:100px;"></a>
</div>
<div class="onoffcanvas is-fixed is-bottom" id="cfb">
<h1>Bottom Canvas</h1>
<a href="#cfb" class="onoffcanvas-toggler" data-toggle=onoffcanvas aria-expanded="false" style="width:100px; height:100px;"></a>
</div>
<div class="onoffcanvas is-fixed is-left" id="cfl">
<h1>Left Canvas</h1>
<a href="#cfl" class="onoffcanvas-toggler" data-toggle=onoffcanvas aria-expanded="false" style="width:100px; height:100px;"></a>
</div>
<div class="onoffcanvas is-fixed" id="cff">
<a href="#cff" class="onoffcanvas-toggler" data-toggle="onoffcanvas" aria-expanded="false" style="width:200px; height:200px;top: 50%;left: 50%;transform: translate(-50%, -50%);"></a>
</div>
Card Canvas
position: absolute
Hoverable Canvas
position: absolute
Hoverable Canvas
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 ...