CSS: Overlapping pop-up obscuring another element

I am having an issue with my pop-up appearing behind another control, specifically an auto-complete text box.

                <div id="navTarget">
                    <ul class="menuTarget">
                        <li><a href="#">&nbsp;</a>
                            <ul style="cursor: pointer;">
                                <asp:Literal ID="litQuickSearchTarget" runat="server"></asp:Literal>
                            </ul>
                        </li>
                    </ul>
                </div>

#navTarget .menuTarget li ul {
background: #fcecdd ;  
width: 150px; 
margin: 0; 
padding: 0; 
position: absolute; 
top: -9999px; 
left: 0;  
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40);
 -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40); 
 z-index: 2000;
 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40);}
jquerycssvb.net

Answer №1

To manipulate the layering of elements on a web page, you need to adjust the z-index property: 

#navTarget .menuTarget li ul {
background: #fcecdd ;  
width: 150px; 
margin: 0; 
padding: 0; 
position: absolute; 
top: -9999px; 
left: 0;  
z-index:10; //higher values appear in front
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40); 
z-index: 2000; // make sure it's a higher value than other elements
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40);
}

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

Preventing box shadows from blending together

I'm struggling with a design issue on my site where I have four divs in the center, each represented by a box with a box-shadow. Unfortunately, the colors of the shadows are getting mixed up and creating an unwanted effect. https://i.sstatic.net/NdAUB ...

htmlcss

Update the grand total based on the values of the checkboxes

I have a code snippet that successfully calculates the total value based on the checkboxes that are selected. Each checkbox has a data attribute value, and I want the total to update dynamically as checkboxes are ticked or unticked. Currently, the code ju ...

javascriptjquery

Seeking guidance for Ajax file uploads

I am currently working on integrating an Ajax file uploader into my project. You can find more information about it here: According to the documentation: var uploader = new qq.FileUploader({ // pass the dom node (ex. $(selector)[0] for jQuery users) ...

phphtmljqueryfile-upload

Choose the initial unordered list within a specific division through Jquery

In a div, there is a ul. Inside a li, there is another ul. The task is to select only the first ul inside the div using jQuery. The HTML markup: <div class="parent"> <div class="clearfix"> <div class="another-div"> <ul cl ...

javascriptjqueryhtmlcss

What are some techniques for utilizing CSS with form.ImageField in Django?

When attempting to apply CSS to form.ImageField in Django similar to CharField, I encountered an error. File "/Users/hogehoge/Desktop/hoge/hoge/forms.py", line 42, in PostForm photo = forms.ImageField(label='Image', validators=[fi ...

cssdjangobootstrap-4

Inexplicably, HighCharts flips its axis when exporting data

I am facing an issue with the display of my Highchart in the web application. While it appears correctly in the browser, the exported chart flips the axis and shows a different image. Below are the options I have configured for my Highchart: var options = ...

javascriptjquerychartshighcharts

Font Awesome icons occasionally display as squares, but typically they render correctly

I've noticed a strange issue on my website where the font awesome icons sometimes display as squares instead of their intended design. After searching through forums, it seems that my situation is different from others experiencing similar problems. I ...

cssfont-awesome

javascript/jquery form validation problems/support needed (jQuery)

Long story short, I am facing an issue with my code and seeking some guidance. I have various functions to perform different checks. For this particular example, I have a form with a default value of "enter name here" for one field. Here is the HTML snipp ...

javascriptjquery

Retrieve key-value pairs from a database and store them as variables in PHP before transferring them into an array in JavaScript

My challenge lies in loading Chinese characters as keys and their English translations as values from a database into a PHP array, so that I can use them on the client side in JavaScript. The process involves fetching key:value pairs from PHP into a JavaSc ...

javascriptphpjquerydatabase

jQuery Ajax is not properly managing encoded query strings when calling a .NET Web Service

I am currently working with a basic .NET [asmx] web service that is set up in the following manner: [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)] public string Find(string stateAbbrev, string city, string name) { ...

jquery.netajax

Display a color box popup when a radio button is selected

I need help implementing a functionality where a popup modal opens when a specific radio button is checked. I have tried using colorbox with an anchor, but it doesn't seem to work with radio buttons. Does anyone have any sample code or suggestions? T ...

jqueryhtmlpopupcolorbox

Evolution of the material through a fresh new slide

Can someone assist me with an animation issue? I have a slideshow consisting of 4 images that are supposed to transition automatically after a set time interval. Upon initially loading the webpage, the animation works perfectly as intended. However, subs ...

javascripthtmlcss

Inject some vibrancy by incorporating color in the space between the navbar and banner on the

Hello! I am relatively new to front-end development and I am currently working on converting a PSD design to code for a project. I am struggling a bit to understand certain concepts but I am eager to learn and improve. I am using Bootstrap 4 for this proje ...

htmlcssbootstrap-4frontendweb-frontend

The malfunctioning of my Jquery datepicker

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).r ...

javascriptjquery

Unable to overlay a div on top of an image

Hello, I'm currently attempting to overlay a div on top of an image. Since the image needs to be responsive, it cannot be set as a background image. Here is the CSS I am using: #slider { margin:0 33%; width:67%; position:relative; } #sli ...

htmlcss

Leveraging the Google Feed API using jQuery's AJAX functionality

Currently, I am attempting to utilize Google's Feed API in order to load an RSS feed that returns a JSON string. (For more information, please refer to: https://developers.google.com/feed/). Despite this, my approach involves using jQuery's AJ ...

javascriptjqueryajaxgoogle-feed-api

Getting JSON data from MVC Controllers

I am looking to fetch JSON data from a controller and assign it to window.location. In jQuery: $('.starcontainer').rating(function (vote, event) { var el = $(event.target); post = el.parent().parent().attr("data-post"); ...

jqueryasp.net-mvcjsonasp.net-mvc-4

Exploring the Power of Django's Generic Views with the Help of JQueryUI Dialog and

Is there anyone who can guide me through this process quickly? I am working with a JQueryUI dialog that is loaded via ajax containing a django form. jquery $("#project_add").on( "click", {url: "/projects/project_create"}, open_dialog ); function op ...

jqueryajaxdjango

Deprecated: Asynchronous XMLHttpRequest on the primary thread is no longer supported

Currently, I am working on the extjs framework. I have developed an application using extjs. However, whenever I launch the application in the browser, I encounter some warnings in the console. The warning message states that Synchronous XMLHttpRequest o ...

javascriptjqueryhtmlajaxextjs

How to ensure uniform button sizes in an HTML form by setting them all equal to the size

The code snippet provided below demonstrates a basic form with two submit buttons. <form> <input type="submit" value="< Previous"> <input type="submit" value="Next >"> </form> Depending on the value attribute, the bu ...

cssforms