CODEWITHSUNDEEP
htmlcsscss-position
pbaldauf
pbaldauf

Reputation: 1681

Position fixed relative to fixed parent

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>

Upvotes: 0

Views: 854

Answers (4)

Md. Parves Kawser
Md. Parves Kawser

Reputation: 78

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

Upvotes: 1

user4537293
user4537293

Reputation:

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

.close-btn {
    position: fixed;
}

I hope it works!

Upvotes: 0

Praxis Ashelin
Praxis Ashelin

Reputation: 5217

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.

Upvotes: 2

Benjamin Evans
Benjamin Evans

Reputation: 146

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/

Upvotes: 4

Related Questions