Position fixed relative to fixed parent

You can achieve a sticky button to your lightBox div by adjusting your HTML a bit and adding a container to your lightBox content:

<div class="lightbox"> <div class="close-btn">x</div> <div class="container"> <div class="items"> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> </div> </div> </div> 

Then instead of the .lightbox div, you add your width, height, overflow properties on this new .container.

.container{ overflow-y: auto; width: 600px; height: 400px; } 

Now your close-btn will not be included in the scrolling part.

JSFiddle demo

EDIT: Benjamin's answer is a more efficient version since you actually already have a containing div: .items. You can use that instead of adding a new one.

1. Draw light box with proper position.
   2.Add close button and container inside light box ans close button position where you need. 3.Finally added items inside container.

thats it.

thanks.

Fixed here

<div class="lightbox"><div class="close-btn">x</div> <div class="lightboxdv"> <div class="items"> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> </div> </div> </div> .lightbox { position: fixed; background: white; top: 50%; left: 50%; border: 1px solid black; margin-left: -300px; margin-top: -200px; z-index: 10000; overflow:hidden; } .lightboxdv{ width: 560px; height: 400px; overflow-y: auto; } .close-btn { position: absolute; top: 0; right: 20px; background: black; color: white; font-weight: bold; border-radius: 100%; width: 20px; height: 20px; text-align: center; } .item { width: 250px; display: inline-block; border: 1px solid blue; height: 300px; background: lightblue; } 

All you need to do is change .close-btn position to fixed.

.close-btn { position: fixed; } 

I hope it works!