Menu
Running in compatibility mode the calendar below renders behind the textboxes below. IE8 displays the calendar how I need it to.
My CSS
.MyCalendar .ajax__calendar_container
{
border:1px solid #7F9DB9;
background-color: #ffffff;
z-index : 1004 ;
width:190px;
}
the textboxes which are overlaying the calendar don't have their z-index set anywhere although I have tried in my server side code to set their z-index to -1 if I detect IE7 to no avail. Any suggestions?
605
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
z-index only affects elements that have a position value other than static (the default). Elements can overlap for a variety of reasons, for instance, relative positioning has nudged it over something else. Negative margin has pulled the element over another. Absolutely positioned elements overlap each other.
If the z-indices aren't changing often, the performance hit probably won't be noticeable at all. Even if you are changing the z-indices a lot, sorting a list of 15 items is almost instantaneous.
To get <Help/> above <Heading/> without adding higher z-index , we can get <Heading/> into a separate stacking context. That way, since <Heading/> and <Help/> are in different stacking context, the <Heading/> z-index will not affect <Help/>. <Help/> would appear to on top of <Heading/> due to the order of DOM elements.
IE has problems with z-index. Most browsers treat the page as one continuous stacking context, but in IE, positioned elements generate a new stacking context, starting with a z-index value of 0.
As mentioned in this article:
http://trwa.ca/2012/03/ie-z-index-bug-and-how-to-squash-it/
try giving the calendar's parent element an even higher z-index.
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
