Page Canvas
position: fixed
This version does not support any version of IE browser.
Code
<div class="onoffcanvas is-fixed is-top" id="cft"
<h1>Top Canvas</h1>
<a href="#cft" class="onoffcanvas-toggler" data-toggle=onoffcanvas style="width:100px; height:100px;"></a>
</div>
<div class="onoffcanvas is-fixed is-end" id="cfr">
<h1>Right Canvas</h1>
<a href="#cfr" class="onoffcanvas-toggler" data-toggle=onoffcanvas 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 style="width:100px; height:100px;"></a>
</div>
<div class="onoffcanvas is-fixed is-end" id="cfl">
<h1>Left Canvas</h1>
<a href="#cfl" class="onoffcanvas-toggler" data-toggle=onoffcanvas style="width:100px; height:100px;"></a>
</div>
<div class="onoffcanvas is-fixed" id="cff">
<a href="#cff" class="onoffcanvas-toggler" data-toggle="onoffcanvas" 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 ...