Improvement for z-index datepicker / other absolute positioned objects

Skip to first unread message

Feb 19, 2009, 2:51:08 PM2/19/09
to jQuery UI Development

First of all, i am not a JQuery Developer, but i was directed to this
I will keep this question short, and if this should be a ticket/bug
report or something, please reply.

I see that that when the datepicker is created, it automatically
receives the z-index value of 0. Some webapps, like mine, Already have
a layered system, so that f.e. the content div may have z-index value
of 1. This results in being the datepicker being rendered under the
content layer, which is not what it is meant to do.

So, it might be a good idea to automatically catch the z-index value
of the parent element and add that value++ to the datepicker (or
similar objects). Since z-index of element is not relative to its
parent, that seems to me a good idea.

Please correct me if i'm wrong. Thanks,

Adriaan Graas

Scott González

Feb 21, 2009, 12:15:55 AM2/21/09
Hi Adriaan,

I've created a ticket for z-index related problems ( ).  I've added a link to this thread in the ticket.


Feb 21, 2009, 3:24:48 AM2/21/09
to jQuery UI Development
Hi Adriaan

The z-index is set in the CSS so it can be easily changed there.

Automatically setting the z-index based on the parent wouldn't work
for the datepicker since the popup panel sits directly beneath body
rather than with the input control.



Bryan Larsen

Mar 25, 2009, 12:47:19 PM3/25/09
to jQuery UI Development
Which also makes it very difficult to write CSS rules to adjust the z-

I'm writing a plugin (, so I
need a general solution. My test case has a datepicker on the main
page (z-index of 0) and in a jQuery-UI dialog (z-index of 1000).

It's easy enough to write specific CSS rules for the test case, but
general rules don't seem to be available. That's a pretty big burden
to place on end users.

Reply all
Reply to author
0 new messages