CODEWITHSUNDEEP
jqueryhtmlcss
José Persichini
José Persichini

Reputation: 83

Overlay elements in web page

I have a web page with a jQuery menu like this and jQuery accordions. My problem is that the accordion overlay the menu (like this) and I want that the menu overlay the accordion.

The code of the accordion is 

            <div id="accordionDatos" class="fondo ui-accordion ui-widget ui-helper-reset" role="tablist">

                <h3 class="fondo ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Datos personales</h3>
                <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" id="ui-accordion-accordion-panel-0" aria-labelledby="ui-accordion-accordion-header-0" role="tabpanel" aria-hidden="true">
                               .......
                </div>      

            </div>

The class "fondo" is .fondo {z-index: 100;}. I put this class in div element and in h3 element (the title of the accordion tab).

Upvotes: 0

Views: 489

Answers (3)

Renjith
Renjith

Reputation: 216

Please check the css. there might chance to over write the z-index and use position:relative with the same.

if you want an element on top of another. Z-index of the element need to be in order.

ex : top element z-index: 2 , bottom element z-index should be less than 2. 

  #accordion {z-index:999; position:relatevie }

Hope this will help you.

Upvotes: 1

Basti
Basti

Reputation: 130

Try to set the CSS z-index property: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Upvotes: 0

Jozsi
Jozsi

Reputation: 138

Try this: #accordion {z-index:100;}

Upvotes: 0

Related Questions