Issues with the z-index property are preventing the correct display of the <input> element

I have an <svg> element that I need to wrap around an <input> text box. I've adjusted the z-index of the <svg> to be higher than its containing <div>, and set the z-index of the <input> text box even higher, but the <svg> still remains on top.

http://jsfiddle.net/6R2mf/1/

<form id="before-list" onsubmit="return false;">
    <label for="search" class="ui-hidden-accessible">Label:</label>
    <div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear"><span class="ui-helper-hidden-accessible" aria-live="polite" role="status"></span>
        <input style="z-index: 10000;" autocomplete="off" class="ui-autocomplete-input" name="search" id="search" value="" placeholder="placeholder" data-type="search" type="text"><a href="#" class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a>
    </div>
</form>
<svg style="position: absolute; left: 0px; top: 0px; z-index: 1001;" xmlns="http://www.w3.org/2000/svg" width="396" version="1.1" height="78">
    <path d="M37.321735818577594,19.412056931773776C91.00900384635584,19.71827132609725,306.20767155776537,15.079895914223181,359.3368606653108,21.253021635495596C412.4692927191486,27.426524157459045,410.1732367732173,50.26181430495186,356.10649891451214,56.45301593533142C302.039761055807,62.64421756571098,86.9940586922537,64.75550694155167,34.93643351307978,58.40023141777294C-17.12119166609414,52.04495589399421,-10.036532153974994,24.179328007664637,43.760747839468635,18.32136279265903C97.55802783291226,12.463397577653424,305.393552534696,22.43059390522592,357.72011347374155,23.252440127739302" stroke="#000000" fill="none" style=""></path>
</svg>

Is there a way to bring the input text box to the front, above the SVG element?

(Using Firefox 24 & jQuery Mobile 1.4.0)

htmlcssformssvgz-index

Answer №1

Visit this link for more information

Below is the additional style that was included in the form:

<form style="position: relative; z-index: 9999;" id="before-list" onsubmit="return false;">

UPDATE

Click here to see the latest version

By reinstating 'position: relative;' in your updated fiddle, it is working properly again

To ensure 'z-index' functions correctly, the element must have a position of relative, fixed, or absolute

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

Centering a dynamic icon within the grid placement

Is there a way to center an icon on a page within a responsive grid layout with multiple items? I have tried using absolute positioning for the icon but it seems to be taking into account the entire screen's range of motion instead of just staying wit ...

htmlcss

Issue with Closing Bootstrap 4 Modal on Hide Operation

I had successfully implemented this feature in bootstrap 3, but unfortunately, I have not been able to replicate the same in bootstrap 4 (beta). The modal for the sign-in form is structured as follows: <div class="modal fade" id="signInModal" tabindex ...

jqueryhtmltwitter-bootstrapbootstrap-modalbootstrap-4

Adjustable slider to display progress, with the ability to reach full completion and reset back

In my current project, I am working on a progress bar that is linked to XP and MAX XP values in SQL. Each time a button is clicked, the user receives 1 XP and the maximum XP is set at 10. Ideally, when a user reaches 100% XP, the progress bar should reset ...

javascriptphphtmlcsssql

Emphasizing Text Within Div Element

Imagine having a div element structured as such: <div id="test" class="sourcecode"> "Some String" </div> Can CSS and JavaScript be utilized to highlight a specific portion of that string based on a search query? For instance, if the search q ...

phpjavascriptcssstringhighlight

CSS auto width not applied to images causing a lack of scaling

I recently added this code to my webpage: image { margin: 0 2px 0 0; height: 100px; width: auto !important; overflow: hidden; text-align: center; } The goal was to scale all images to a maximum height of 100px and have the browser adj ...

cssimageheightscaling

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...

javascriptjqueryhtmlcss

Guide to overlaying an SVG on a PNG in an HTML document

Can anyone provide guidance on how to position an SVG logo on top of a PNG image, centered within it? Here is the image I am working with: https://i.sstatic.net/GWrGs.png This is the desired outcome: https://i.sstatic.net/PEgVw.png Below is my SVG file ...

htmlsvgbootstrap-4

Volume slider missing on Handel?

I'm having an issue with my volume slider in jQuery - the handle is not showing up despite it working. Any suggestions on how to make the handle visible? The jQuery I have imported: <script src="jquery-3.4.1.min.js"></script> <script ...

jqueryhtmlcssjquery-ui

Arrangement of a pair of elements within a single sequence

Can someone help me align the text and icons (login, shop) to be at the same level as the 'Logo,' but on the right side? I attempted to adjust the '.shop-icon' with {margin: -30px auto;}, but it ended up messing up the entire page layou ...

htmlcssweb

prismjs plugin for highlighting code displays code in a horizontal format

If you're looking for a way to showcase source code on your website with highlighted syntax, prismjs.com may be just what you need. It offers a similar style to monokai... However, I've encountered an issue where the plugin displays my code in a ...

javascripthtmlcsstinymcecode-hinting

Troubleshooting: Django's ModelForm not displaying properly

I'm having trouble getting a basic form to display in Django. When I run the server, the form doesn't render properly. Can someone help me troubleshoot? Here is my code: models.py STATUS_OPTIONS =( ('OP', 'OPEN'), (&a ...

pythondjangoformsdjango-formsdjango-templates

Issue encountered when attempting to conceal navigation buttons in navbar post user login due to Stack Overflow error

Is there a way to hide the login button in the masterpage header once the user is logged in? Here are the relevant codes: SiteMaster.Master.aspx <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteMaster.Master.cs&q ...

c#htmlasp.net

What is the best way to add a triangle pointer to the Vuetify v-menu component?

Is there a way to insert a triangular pointer into the v-menu component of Vuetify 2.x? I am referring to this common feature found on web pages (as seen in this screenshot from Github): https://i.stack.imgur.com/DMOjF.png I have included sample code he ...

cssvue.jsvuetify.js

Position elements flush to the left and right

Is it possible to align the text in divs so that it perfectly lines up along the edges? .name { margin: 0 0 5px 10px; font-weight: bold; font-size: 14px; } .row { margin: 0 0 5px 10px; width: 500px; justify-content: space-between; } < ...

htmlcss

Guide to saving a Django-HTML webpage as an XML document

Is there a way for me to export, like a download button, an html page that contains Django syntax in XML format? How can I achieve this task? ...

htmldjangoxml

Masterful Text Pairing: Using Zen Coding Techniques for Crafting Intricate Nesting Structures

Result : <div id="header"></div> <div id="body"> <hello> <world></world> </hello> </div> Mapping to : div#header+div#body>hello>world Which command should be used to achieve the desi ...

htmlcsssublimetext2

Is Bootstrap CSS cached by Chrome?

As I began a new project, I decided to tweak the color settings in bootstrap. During debugging in Visual Studio, everything appeared as intended. However, after publishing the site for the first time on a server, I noticed that the color change I made in ...

cssgoogle-chrome

Stopping raised div from shifting according to screen width

I am seeking a solution to prevent a div from moving up on mobile devices with smaller widths. While I understand that this can be achieved with media queries, I am curious if there is a more elegant approach. .wrapper { background: no-repeat cente ...

htmlcss

I need some guidance on how to create this using CSS, or what keyword should I use to find a similar solution

My client's website requires this specific design, but I am struggling to find a similar CSS format online. Can you provide assistance in creating this layout? Attached is an image for reference: https://i.sstatic.net/gJua4.png ...

css

The click function in the <a> tag is malfunctioning

I am currently working on a dynamic menu system that pulls its items from a database. I need to determine the ID of the clicked menu item within a foreach loop in the following code: public function gen_menu($menuItems, $pId = 0) { $menu = &apos ...

phphtmlonclick