Position fixed relative to fixed parent - html

Question

I have a fixed positioned DIV called Lightbox. My problem is that the close button doesn't stay on the top right, when I scroll the content.
How can I achieve that the close button stays on the top right corner?
Fiddle Link
.lightbox {
position: fixed;
background: white;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
border: 1px solid black;
margin-left: -300px;
margin-top: -200px;
z-index: 10000;
overflow-y: auto;
}
.close-btn {
position: absolute;
top: 0;
right: 0;
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;
}
<div class="lightbox">
<div class="close-btn">x</div>
<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>

Answer 1

Make the item div scrollable instead of the lightbox, then the close button will stay absolutely positioned in the top right corner.
Here is the CSS that I changed:
.lightbox {
overflow: hidden;
}
.close-btn {
top: 5px;
right: 20px;
}
.items {
width: 600px;
height: 400px;
overflow-y: auto;
}
JSFiddle: http://jsfiddle.net/dgw8tj5r/4/

Answer 2

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.

Answer 3

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;
}

Answer 4

All you need to do is change .close-btn position to fixed.
.close-btn {
position: fixed;
}
I hope it works!