Guide to positioning a close icon in the top right corner of a div with a scroll bar

I'm trying to customize my modal box by adding a close button at the top right, slightly outside of the box. I found an example of what I want here:

https://i.sstatic.net/7FsjB.png (Taken from this site)

The CSS code to add the cross at the top right corner is as follows:

#closeModal { 
    position:absolute;
    top:-12px; /* Half the icon's height */
    right:-12px; /* half the icon's width */
    z-index:50;
}

This solution works when the div has overflow set to visible. But in my case, I need the content to be scrollable with overflow: auto;, which causes the cross to be cut off.

Since my modal box has a fixed pixel width and is centered automatically, positioning the close button outside the box using position:fixed; doesn't align properly with the modal box.

Here is a JSFiddle demonstrating the issue

Is there a way to achieve the desired close icon placement while keeping the content scrollable?

Answer №1

Encase it in a wrapper and apply the style...

Here is an uncomplicated solution

<span class="fa-stack fa-lg close-button">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-times fa-stack-1x fa-inverse"></i>
    </span>

<div class="testing-div">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas est erat, hendrerit vel massa ut, pharetra facilisis dui. Aliquam egestas sodales leo, aliquet vehicula libero pretium vel. In quis lacinia massa. Ut pretium rutrum est sed mattis. Vivamus tempor est sapien, id volutpat ipsum vulputate ut. Cras viverra, ligula non blandit mollis, libero augue sollicitudin lectus, id scelerisque sem felis id mauris. Aenean et est fringilla, condimentum nisl varius, efficitur leo. Pellentesque iaculis, erat vestibulum malesuada posuere, augue orci blandit lorem, vel dictum nisi arcu sit amet justo. Nullam dapibus tincidunt ...

Curabitur efficitur sit amet eros a imperdiet. Donec vel enim eget odio suscipit viverra. Nunc venenatis tortor non sollicitudin ultrices. In consequat in augue in molestie. Quisque at ligula ex. Aenean tristique mollis dui non bibendum. Aenean sapien erat, porta vitae auctor vitae, aliquet at urna. Nullam ultricies dui vitae velit dapibus, id lacinia augue consequat. Donec elit nulla, laoreet non tellus ut, blandit egestas quam. Nullam at tristique tellus. Fusce lorem tortor, congue et facilisis sit amet, feugiat ac erat. Phasellus in vestibulum arcu.

Sed rutrum risus in venenatis congue. Curabitur in dui feugiat, pulvinar ligula sed, cursus dolor. Mauris tincidunt dolor ligula, ut feugiat tellus ullamcorper at. Fusce imperdiet egestas turpis vulputate dignissim. Proin aliquam arcu a nulla semper, eget pellentesque arcu lacinia. Suspendisse dictum lobortis libero eget tristique. Donec sit amet blandit nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec luctus consectetur justo, et ultrices enim. In in ante sagittis tellus iaculis scelerisque. Nulla eros justo, accumsan ut metus a, mollis accumsan diam. Nulla faucibus arcu nunc, ut posuere lacus dignissim a.

Integer volutpat augue sed sapien...
</div>

</div>

with additional css

.testing-div {
    position: relative;
    display: block;    
    height: 400px;
    width: 300px;
    overflow: auto;
}

.close-button {
    position: absolute;
    right: -35px;
    top: -35px;
}

.wrapper { 
    height: 400px;
    width: 300px;
    position: relative;
    display: block;
    margin: 20px auto;
}

Answer №2

Place your Modal box inside an additional wrapper div, as shown below:

<div class="container">

       ....Modal....
</div>

CSS:

.container{

    margin:30px;
    position:relative;
    width:300px;
 }

 .testing-div {
    //position: relative;
    display: block;
   // margin-top: 10%;
   //margin-left: 20%;
   height: 400px;
   width: 300px;
   overflow: auto;
   //margin:50px;
 }

Fiddle: https://jsfiddle.net/no7wjhm2/5/ - Check out the live code demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add a fading effect to the margin section of an HTML element

Check out this example code showcasing HTML and CSS: HTML <nav>...</nav> <div class="row"></div> CSS .nav{ margin-bottom: 10px; } I am looking to create a subtle fading effect in the bottom margin of the navbar. Can you as ...

The Vue.js v-on:mouseover function is not functioning properly in displaying the menu

When I hover over a LI tag, I want to display a menu. I have successfully implemented it using a simple variable with the following code: @mouseover="hoverFormsControls=true" @mouseleave="hoverFormsControls=false" However, when I attempted to use an arr ...

Is there a way to distinguish between automated bots and human users who are visiting my website?

Is there a way to detect if a bot is navigating my website? My website requires users to submit a form in order to access the next page. To speed up the page load time, I perform additional background database queries when a user submits the form. Howev ...

The Quintessential Bootstrap 5 Hero

I'm struggling to determine which classes to add or remove in order to achieve the same image positioning as shown in the preview of the Bootstrap Border hero with cropped image and shadows. My image isn't aligned with the edge of the hero conta ...

Is there a way to distinguish the navigation bar list from the body list?

Currently, I am in the process of developing a website with Django 1.9 and manually coding all the HTML components. However, I am facing some challenges. One of the elements I created is the navigation bar, for which I utilized the following HTML code: h ...

Issue with a child element that is malfunctioning because of the parent element

There seems to be an issue with the child tag link not working because of the parent tag link. Is there a solution for this problem? Please provide suggestions. Here is the code snippet: <div class="d-flex flex-wrap mx-auto mb-4"> < ...

Adjustable / consistent box height

For hours, I've been attempting to make some divs the same height. Check out my JSfiddle here: https://jsfiddle.net/4cj5LbLs/15/ I experimented with using display: table; in the parent element and either display: table-cell; or display: table-colum ...

Text overlay on image sliders inside div containers

Is there a way to display div elements on top of an image slider, rather than behind it? I've tried using z-index and position: absolute with no success. Here is an example: HTML: <div id="header"> <img src="assets/images/header1.png" / ...

ASP TextChanged event is not triggering unless the user presses the Enter key or tabs out

My code is functioning correctly, however, the TextChanged event is triggered when I press enter or tab, causing my code to execute. I would like to be able to search for a record without having to press enter or tab. ASP: asp:TextBox ID="txtNameSearch ...

Troubleshooting: CSS not running in WooCommerce WordPress theme file

I recently set up a Woocommerce plugin on my fully functional custom Wordpress theme by following the instructions in this guide. I copied and modified the page.php file as instructed, renaming it to woocommerce.php. While the Woocommerce functionality wor ...

What exactly is the relationship between WindowProxy and Window entities?

Could you provide some insight into the purpose of the WindowProxy object? I know that the real Window object uses it for all its operations, but I'm struggling to grasp its significance. ...

Implementing jQuery selector for CSS and properly handling special characters in the code

I've been attempting to use jQuery to change the background color of a radio button. I provided the CSS code below, but even after escaping special characters in jQuery as shown below, the solution still isn't working. #opt5 > [type="radio"]: ...

Implementing a countdown timer using a database column value

Is there a unique way to utilize user-entered values in a database as a dynamic timer countdown that persists even after page refresh? I'm encountering an issue where the displayed value remains static. Are there alternative methods for implementatio ...

Troubleshooting: Issues with jQuery JavaScript Modal Popup functionality within MVC framework

When I click on the "Comments" link, a modal popup opens up and displays the content as expected. Now onto my issue: In the first scenario, the desired outcome is achieved but some other code does not execute. In this case, when I place the "@section" ins ...

"Why is it that only one of the two similar spans with onclick event is not functioning properly

Encountering a perplexing issue that has me stumped. Here's the code in question: js: function Test() { alert("test"); } html: <span id='bla' onclick='Test()'> Click me </span> <hr> <span id='bla2& ...

Designing an adaptive div for textual content without relying on Bootstrap

I am working on creating a responsive div that includes an image, text, and spacing between the divs. Initially, I had divs with spacing and text but they did not resize properly when more text was added. I am aiming to achieve a layout similar to this: ht ...

Employing useEffect within Material-UI tabs to conceal the third tab

At the page's initial load, I want to hide the first two tabs. The third tab should be visible with its content displayed right away. Currently, I can only see the content after clicking on the third tab. To troubleshoot this issue, I attempted to use ...

Dividing the content: A two-column CSS layout

I am currently redesigning a layout that is using tables for a two-column design but I have encountered some issues. <div id="frame"> <div id="leftcol"> <div id="1">blah</div> </div> <div id="leftcol"> <div ...

Design a navigation bar that seamlessly incorporates an image

I am struggling to achieve a seamless header design that flows from the logo. I have experimented with aligning images within containers and using long background images, but neither method has yielded satisfactory results. Is there a reliable way to cre ...

Guide to positioning elements in CSS

I'm struggling to get all the elements to align in a single row. I've tried using display: inline-block, but it's not working as expected. I'm working with DataTables and I want the button images to be aligned with the page number box. ...