CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jay
Jay

Reputation: 357

How do you use "position:fixed" for fixing an img to a pop-up div?

So I have a div that is formatted to essentially be a "pop-up" on my website. So on the website, you can scroll. But then when you click an icon to trigger the pop-up, the pop-up itself will allow scrolling (and the scrolling of the website will be disabled). But now I have an image for the "close" button which I want to be fixed in a certain position on (and only on) this div. How would I accomplish this? I don't want the close image to show up at all until the popup is shown, and it disappears when the popup is closed. Currently, I'm using "position:absolute" and it only shows for the popup, and goes away when the popup is closed. But the user has to scroll back up to see the close button again.

Upvotes: 0

Views: 118

Answers (1)

Will Reese
Will Reese

Reputation: 2841

Fiddle Here

Using absolute position is a fine idea in this situation. The key is to make sure that the close button isn't inside the scrollable pane, but on the same level as the wrapper.

HTML

<div class="popup">
    <div class="popup-content-wrap">
        <div class="popup-content"></div>
    </div>
    <div class="close">close</div>
</div>

CSS

.popup {
    position: fixed;
    background-color: blue;
    left: 50px;
    right: 50px;
    bottom: 50px;
    top: 50px;
}
.popup-content-wrap {
    height: 100%;
    width: 100%;    overflow: auto;
}
.popup-content {
    height: 1000px;
}
.close {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

Upvotes: 2

Related Questions