z-index elements over dynamically generated html
I have a div that is using fixed positioning with a z-index of 100 which I want to overlap all other elements on the page. I am having some problem开发者_高级运维s with jquery ui tabs and dynamically generated html.
It seems that since the content in the tab is dynamically generated, it gets a higher stack order, so it overlaps my div element. Is there a way to always have the div at the top of the stack order?
I have also tried setting the z-index order of the .ui-tabs class to 0 (didn't work)
The fact that the HTML is dynamically generated should have no impact on the z-index. I think it's more likely that you're making a mistake with the CSS. Z-index can be a tricky property, but the way to make sure it works correctly is to declare a position: property on every element that could potentially interfere with it. That probably means you just need to declare position:relative, along with z-index:0 on the elements you want to make sure it overlaps.
If you could post the resulting HTML & the CSS affecting it (i.e. after the dynamically generated HTML has been loaded in the page), that might also help.
You might be able to write some fancy JS that auto-bumps z-index, but I doubt that is necessary.
More likely there are errors in the HTML and CSS. Link to the page in question, or save the source at pastebin.com and link to that.
In general:
- Order and tree-level still count; place the super element directly after the
<body>tag, even though it is positioned separately. - A
z-indexof 100, is not enough to guarantee it has the highest value. I've seen sites use z-indices of 199999 (EG: div#control), or higher! - Be careful of
opacitysettings.
See:
- Understanding how z-index works
- z-index demonstration tool
- Understanding CSS z-index
加载中,请稍侯......
精彩评论