What is the best way to utilize "position:fixed" in order to attach an image to a pop-up div?

Question

What is the best way to utilize "position:fixed" in order to attach an image to a pop-up div?

On my website, I have a div that functions like a pop-up when triggered by an icon click. This pop-up allows scrolling within itself while disabling scrolling on the rest of the website. However, I'm facing an issue with positioning a fixed image for the "close" button only within this pop-up div. The challenge is to make sure the close image is hidden until the pop-up is displayed and disappears when it's closed. Currently, I've used "position:absolute" which works for showing the close button only within the pop-up but requires users to scroll back up to see it again after closing the pop-up.

javascript jquery html css

Answer 1

Answer №1

Try it out in this interactive demo

If you're looking to use absolute positioning, it could work well for your needs. Just remember to keep the close button outside of the scrollable area and on the same level as the wrapper.

Here's an example of how you can structure your HTML:

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

And here's the CSS to go along with it:

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

Answer 2

Try it out in this interactive demo

If you're looking to use absolute positioning, it could work well for your needs. Just remember to keep the close button outside of the scrollable area and on the same level as the wrapper.

Here's an example of how you can structure your HTML:

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

And here's the CSS to go along with it:

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

What is the best way to utilize "position:fixed" in order to attach an image to a pop-up div?

Answer №1

Similar questions

Incorporating a self-invoking anonymous function to enhance Sir Trevor within an AngularJS framework while also making use of

How to use .sort() and .data() to arrange HTML elements in Internet Explorer 11 and Microsoft Edge

Create a new one-dimensional array by stacking the columns of a matrix

Best Practices for Installing Webpack in a Client/Server Folder Structure

Issue with cloning InvokedOn text from the context menu

What are the steps to effectively utilize my search bar alongside Google Custom Search?

Guide on transforming Json information into the preferred layout and iterating through the loop

Chrome automatically scrolling back to the beginning of the page following a remote form submission

In the realm of Javascript, the postAjax function fails to successfully post any content

Curious about the thumbnail icon in mobile Chrome? Find out how you can incorporate it into your website!

Master the ins and outs of working with Angular and Webpack on

Combine the remaining bars by stacking the highest one on top in Highchart

Leverage the AJAX response data for another JavaScript function

The received URL from the POST request in React is now being opened

Display the poster image by pausing the video on an HTML webpage

Thymeleaf is responsible for fetching the static resources by referencing the REST URI

What steps should I take to address the issue of the document not being defined?

What is the best way to showcase a div on top of all other elements in an HTML page?

Opt for CSS (or JavaScript) over SMIL for better styling and animation control

Is there a way to determine which label in the Material UI default theme affects the default border color, specifically excluding the focus or hover border?