How to layer a div on top of another using CSS

I have a container div that is styled with CSS properties. When a button is clicked, I need to display a modal overlay with a message.

<div class="dvLanding">
 <div class="popupArea">
            <span class="VoteOnce">You can only vote once.</span> <a style="vertical-align: top">
                <img alt="close" src="../../Images/error1-exit-button.png" /></a></div></div>
    </div>

Here are my CSS classes:

.dvVoteWrapper
{
    background-color: #949494;
    opacity: 0.5;
    filter: Alpha(opacity=50);
    display:none;
    width: 1024px;
    height: 768px;
    position: absolute;
}

.popupArea
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.dvLanding
{
    background-image: url(/Images/screen1-bg-logos.jpg);
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}
   .VoteOnce
{
    font-family: Calibri regular;
    font-size: 24pt;
    background-image: url(/Images/error1-vote-once-bg.png);
    background-repeat: no-repeat;
    width:288px;
    height:74px;
    color: #000000;
}

I am using jQuery to remove the display:none attribute. However, the modal is not covering the entire page and appears distorted. Any suggestions on how to fix this issue would be greatly appreciated. I have also included some screenshots for better clarity.

csshtmlpositionoverlay

Answer №1

Here is a different example:

HTML:

<div class="mainContainer">
    <div class="contentSection"></div>
    <div class="sidebarSection">
        <br />
        <br />
    </div>
    <div class="footerSection"></div>
</div>
<div class="modal">
    <span class="modalTitle">Welcome to the modal.
        <a class="closeButton">
            <img alt="close" src="../../Images/close-button.png" />
        </a>
    </span> 
</div>

CSS:

.mainContainer {
    background-image: url(http://lorempixel.com/800/600);
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0.7;
}
.modal {
    background-color: lightblue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -150px;
}
.closeButton {
    vertical-align: top;
    font-size: 12pt;
}
.modalTitle {
    font-family: Arial, sans-serif;
    font-size: 20pt;
}

JSFiddle for demonstration.

Answer №2

To ensure the container covers the entire screen, you can utilize the following style:

position:fixed; left:0; top:0; z-index:100; width:100%; height:100%;

Make sure that the z-index value is greater than that of any underlying elements you wish to overlay.

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

Analyzing the browser's address bar and creating a navigation link derived from it

Is there a way to create a script that can extract information from the address bar? For example, if we have a link like this: We want to be able to take the "page-2011" part and dynamically generate navigation links like this: « <a href="/page-2010 ...

javascriptjqueryhtmlcss

Creating a vertical navigation menu and displaying its submenu on corresponding pages in a horizontal layout

I'm struggling to design a navigation layout for my website where I want to display the main menu items like this: Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 and have their respective sub-menus displayed horizontally on their main menu pages like this: ...

htmlcssmenu

What could be causing the drop-down menu to function properly when offline but not when accessed on the server?

When visiting the website here and clicking on the contact link, you should see a Google map. However, for some unknown reason, it does not display. The strange part is that when I open the contact.html file directly, the map works perfectly fine. It seem ...

javajqueryhtmlcssbootstrap-4

What might be causing the 404 Error to appear on the mobile version of my website?

Currently, I am in the process of developing a static website using HTML, CSS, and Javascript. To add on-scroll animation effects, I have incorporated a plugin known as AOS. In addition, I have included Bootstrap in my project which was installed through n ...

htmlwebhttp-status-code-404cpanelweb-hosting

The process of increasing value through a function in PHP

Looking to create a function that increments a variable when a button is clicked. I have 4 buttons: farm, cave, house, casino The goal is to accumulate the random numbers generated by each button and add them up in the "YOUR GOLD" section. For example, c ...

phphtmlcss

My PHP script is not functioning correctly with Ajax

I am currently working with HTML5, PHP, and JavaScript. My goal is to implement Ajax in order to display the sizes of a selected product when an option is chosen from #productoSeleccionado. However, I believe that there may be an issue with my code as the ...

javascriptjqueryajaxhtml

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

javascriptjquerycss

How can we style the <a> link once it has been downloaded?

Is there a way to change the color of a download link after it has been clicked on? I've attempted using the visited attribute, but it only seems to work with regular links and not with download documents: Appreciate any help ...

javascripthtmlcssreactjs

What is the best way to change the maxWidthLg of Material UI's .MuiContainer?

I need to remove the max-width that is set in the theme. When I look at it in Chrome and uncheck the option, it functions as desired: @media (min-width: 1280px) .MuiContainer-maxWidthLg { max-width: 1280px; } How can I achieve this? I have attempted ...

cssreactjsmaterial-uioverriding

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

javascripthtmlhtml-table

overlay appears as I reveal the slide-out menu

Struggling with adding an overlay to an expanding navigation bar, similar to Youtube's overlay when the slide-out nav is open. Need help with the implementation. Here is the javascript code for the expanding navigation using jQuery: 'use strict ...

javascriptjqueryhtmlcsstwitter-bootstrap

Do you know where I can locate the HTML and CSS pertaining to the search results page

I'm looking for a way to present search results on my website that resembles the Google search results, creating a familiar interface for users. Is there anyone who knows where I can obtain the HTML and CSS code that produces the same style as Google& ...

htmlcssstyles

Interactive pop-up text box for data cells in a table

I have implemented a textarea in the td cell of each row within column 3 to store description specific to that row. The goal is for the current description in the td's textarea to be copied over to the textarea located inside #div_toggle when the user ...

htmljquerycss

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Determine the minimum width in an HTML table's <td> tags

One issue I have encountered is with the columns in my table. I need each column to adjust its width dynamically based on the size of the browser window. However, I also want to ensure that the columns are not too small. To address this, I attempted to se ...

htmlcsshtml-table

retrieve the webpage hosted on the server

Seeking to develop a website where users can input a website URL and have it loaded from the server hosting the HTML page, rather than from the user's computer as iframe does by default. I've experimented with various techniques but all seem to l ...

javascripthtmlwebserver

Discovering the technique to display data in PHP only from the database that is specific to the authenticated user

When creating a to-do list, I want the user (not admin) to only see tasks assigned to them. This should be indicated under the assignee column with their name. https://i.stack.imgur.com/WP5C8.png However, currently the user named Lala can see not only th ...

phpjqueryhtmlmysql

Adjust the size of the font for the placeholder text

I've been attempting to adjust the font size of the placeholder text. I added the font size property to the listed classes below, but for some reason, it's not taking effect. Could you please advise me on how to resolve this issue so that I can ...

javascripthtmlcssreactjsmaterial-ui

Unable to eliminate the unwanted space at the top of the division

I am encountering an issue where I have a div containing a label, but there seems to be some unwanted space above the div that I can't seem to remove. It's puzzling me as to why this space is appearing. Query: What could be causing the space ab ...

htmlcss

When hovering over the background, it will enlarge but the text in front will remain the same size

As the user hovers over the image, the image enlarges. However, there is also some information that needs to be displayed in front of the image. This is my current implementation: .home-about-link { overflow: hidden; width: 100%; } .home-about { ...

javascriptjqueryhtmlcsscss-transforms