Fixed Position inside parent

position:fixed inside a parent instead of the default behaviour (wich is the browser window)

by jkneb

HTML

<div class="main">
    <p>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.</p>
        
    <div class="fixedFakeParent">
        <div class="fixed">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
        
    <p>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.</p>
</div>

CSS

.main { 
    position:relative; 
    margin:0 auto; 
    border:1px solid #ddd; 
    padding:25px; 
    width:350px; 
    height:2000px; 
    background-color:#f1f1f1; 
}

.fixedFakeParent { 
    position:absolute; 
    right:0; 
    padding-right:140px; 
}

.fixed { 
    position:fixed; 
    padding:15px; 
    background-color:#fff; 
    border:1px solid #ddd; 
    width:140px; 
}