Displaying content using Jquery's slideDown feature, overlapping existing content

I am working on displaying one piece of content over another using Jquery slidedown as an overlay. Despite adding z-index properties, I am struggling to make it work.

My goal is to have the div with class "selection_nip" appear as an overlay on top of another element.

Apologies for any formatting issues.

Here is some HTML code:

<div id="ask_question_post_envelop" class="bottom_border_radius" style="position:relative; z-index:10;">

    <div class="selection_nip" style="display:none; position:relative; z-index:1000;"></div>
        <span id="arrow-dashboard" class="arrow-dashboard"></span>
        <div id="avatar-wraper" class="avatar-wraper">
            <a href="#" class="post-avatar" id="" ><img id="avatar-img" src="<?php echo $user_data['photo'];?>" border="0" alt=""></a>
        </div>  

        <div id="form_wrapper_question" class="form_wrapper_question" >
            <!--    THIS IS WHERE ALL FORMS GO         -->  
        </div>

        <div id="" class="question-page-form_wrapper" name="profile_identifier" style="position:relative; z-index:10;">
            <div style='height: 0px;width: 0px; overflow:hidden;'>
                <input id="profile_id" type="text" name="profile_id" value="<?php echo $profile_data['user_id']; ?>"/>
            </div>
       </div>
</div>
jqueryhtmlcss

Answer №1

To properly position the div "selection_nip", you should set its position to absolute.

#selection_nip {
    position: absolute;
    top: 0px;
    left: 0px;
}

This will make it align on top of the content within the div #ask_question_post_envelop (the first parent with a relative position).

Your result will resemble something like this: Check out the Fiddle example 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

Reading settings from web.config file in an HTML page

Currently working with ASP.NET 3.5 web forms. I've recently saved the path of my website in the web.config file under the key "CommonPath". I have a basic static HTML page that I would like to utilize this key on. Any suggestions on how to achieve ...

asp.nethtmlweb-config

When the Navbar div is set to Position:fixed, it generates empty space on the page

I'm facing the issue of unwanted white space in the center of the page below the Navigation Bar. Despite numerous attempts to remove it, I haven't been successful. Below is the HTML code snippet: html: <!DOCTYPE html> <html> <h ...

htmlcsswhitespace

Store the numeric value in JavaScript as a PHP integer

My goal is to obtain the width of the browser and then compare it as a PHP variable. However, the issue I am facing is that it is being saved as a string, and my attempts at parsing it to another variable only result in returning 0. $tam='<script& ...

javascriptphpjqueryparsingcasting

Center the p tag vertically

To ensure the text inside the p tag aligns vertically in the middle, I've set a specific height for the tag. While this works perfectly for single-line text, it shifts to the top of the p tag when there are two lines of text. It's important to k ...

htmlcssparagraph

Highcharts Date Confusion

My JSON data includes timestamps and values like: [ [1230768000,2], [1233446400,3], [1235865600,2], [1238544000,6], [1241136000,1], [1243814400,2], [1246406400,7], [1249084800,3], [1251763200,5], [1254355200,2], [1257033600,5], [1259625600,4] ] The dates ...

jqueryasp-classicunix-timestamphighcharts

The issue with jQuery trigger not passing the value of a radio button has been

I have implemented a radio button (Yes, No) and an input text box on my form. If the user selects 'No', the input field is disabled and jQuery triggers a change event for AJAX form submission. $('#form-id').change(function(){ .... }); ...

jqueryhtmlajaxtriggers

Using CURL in PHP to make a post request on a form

this is the form: <textarea name="message" id="messageContent" rows="18" wrap="virtual" tabindex="2"></textarea> <span id="formSubmit"> <a href="#" class="formSubmit" tabindex="3"> <img src="/clear.gif" class="master-sprite ...

phpformsjquerycurl

Struggling with generating an ajax request in Laravel?

I am currently learning about Laravel and working on creating an Ajax Registration form. However, I am encountering an issue with my ajax process not being able to access the URL. The error message I am seeing is as follows: XMLHttpRequest cannot load fil ...

phpjqueryajaxlaravel

The error alert must be displayed directly beneath the specific box

When error messages occur in this code, they are displayed through an alert box. However, I would prefer to have the error message appear below the specific text box instead. This means that when I click on the submit button and a field is left empty, the ...

phpjavascripthtml

Issue with React Toastify display not showing

I'm having trouble getting a pop-up alert to appear when a user interacts with a radio button. I've included the relevant code snippet below. Even though I see the console message when I select a radio button, the pop-up doesn't show up. Can ...

htmlreact-toastify

Is it possible to utilize AJAX requests in order to create a marker on google maps that updates in real-time?

My goal is to develop an app that generates a real-time updating google map, and I have been advised that AJAX requests can help achieve this. Nevertheless, after studying the documentation, I am uncertain about how to apply this method to solve my issue ...

javascripthtmlajaxflask

basic handler in expressjs using the PUT method along with jQuery ajax

I am currently developing a web application utilizing a REST API for server communication. The backend is built with Node.js using Express.js. One issue I am running into is the inability to read the request body in PUT requests. Below is my client-side co ...

javascriptjqueryajaxnode.jsexpress

Utilizing one URL to post parameters and retrieving JSON data from a different URL

Currently I am working with jQueryMobile and PhoneGap, but encountering an issue. I am trying to retrieve details in JSON format by posting parameters to one URL (URL1) and receiving the JSON response from another URL (URL2). However, I am unable to access ...

jsonjqueryurljquery-mobilecordova

Guide on setting the href value within a $.each loop in AJAX requests

I am struggling with downloading a file within a thread. The issue I'm facing is that I can't set the file name in the href and download attributes, so when I attempt to download it, it shows no file available. However, I did realize that replaci ...

javascriptjquery

Increment Counter on Presence of Items in a Table with jQuery

Does anyone know how to properly increment a counter in jQuery based on certain words found within a table? I am currently encountering an issue where my counter is only increasing by 1 instead of the expected 2. Here is the HTML and jQuery code snippet: ...

javascriptjqueryloops

Best practices for selecting checkboxes and transferring values to another page in PHP/HTML

Apologies for my lack of experience in PHP. I am in the process of creating a project without any knowledge of PHP. I have set up a database with a list of users and can display users based on specific information through a search. Each search query has a ...

javascriptphpjqueryhtml

Creating layered images in HTML 5 Canvas using multiple images

How can I draw two images on one canvas without the first image possibly loading slower than the second one and appearing on top of it? I want to ensure that the second image is always drawn on top of the first image. Any suggestions? ...

imagehtmlcanvas

Transform a jQuery element into an HTML element

I'm facing a dilemma where I have a jQuery element that needs to be passed into a function that only works with HTML elements. How can I efficiently convert the jQuery element into an HTML element? ...

javascriptjqueryelement

Manipulating Querystrings in Window Location using JQuery

Having a dilemma while working on JQuery, I am seeking your assistance and guidance. Currently, I need to achieve the following three tasks in my existing window.location.href: If there is no querystring in my window.location.href, I aim to add ?mode= ...

jquery

Avoiding flickering when the browser back button is clickedAvoiding the flickering effect

As I work on developing an Asp.Net application, a challenge has arisen. In order to prevent users from navigating back to the login page after logging in, I have implemented JavaScript code successfully. However, when clicking the browser's back butto ...

asp.netjavascripthtmlbrowser