Fixed position DIV within wrapper

Example of a fixed position sidebar div positioned related to a main wrapper div.

by a e

HTML

<div id="wrapper">
     <h1>WRAPPER</h1>

    <div id="main">
         <h1>MAIN</h1>

    </div>
</div>
<div id="sidebar">
     <h1>SIDEBAR</h1>

</div>

CSS

h1 {
    font-family: monospace;
    display: inline-block;
    height: 2000px;
}
div#wrapper>h1 {
    height: 50px;
}
body {
    background: #fff;
}
div#wrapper {
    margin: auto;
    width: 80%;
    background: #ddf;
}
div#main {
    width: 60%;
    padding: 10px;
    background: #fdd;
}
div#sidebar {
    position: fixed;
    width: 30%;
    left: 60%;
    top: 100px;
    background: #dfd;
}