To achieve the desired layout, set the main-wrapper to have a position of relative
, while giving the child element a position of absolute
. This allows you to easily position the child using properties like left
and top
.
<style>
body { overflow-x:hidden }
#wrapper { position:relative }
#floating-sidebar { position:absolute; top:0; left:-100px; width:100px }
</style>
<div id="wrapper">
<div id="floating-sidebar">
<p>Lorem ipsum...</p>
</div>
</div>
If you prefer using jQuery, it would essentially serve as an intermediary for applying the same positioning technique mentioned above.