On this page, there are two navigation menus at the top of the page.
One is #topmenu, the one below it is #mainmenu.
#topmenu has a z-index of 200
#mainmenu has a z-index of 100
When I hover over "Depth" in the top menu, and follow the submenu down through Level 01, Level 02, Level 03..., I can't progress past Level 03, because I believe #mainmenu is stealing the pointer's focus.
Why does this happen when #mainmenu has a z-index less than #topmenu?
Unfortunately, z-index only works on positioned elements (absolute, relative, or fixed): http://www.w3schools.com/cssref/pr_pos_z-index.asp
Both menus have the default positioning (static).
And FYI, there is a bit of space between the levels. If a mouse event happens to get fired there, they all disappear. You'll want to fix that.
Related
I try to use column header menus and row context menus in my tabulator but nothing appear. Then I realize in the DOM that the menu is there but out of the window and at the top of the tree in the dom, it's the div with the class tabulator-menu.
The DOM, the div with smd take the whole page
I use Vuejs with Bootstrap 4.
How to make it appear at the right place ?
Thanks
The menu is appearing in exactly the correctly place in the DOM.
It is standard practice in a lot of context menu libraries to append the menu directly to the body rather than to the element that triggered it, this happens because menus are often long and overflow their containing element, by absolutely positioning the elements in the DOM the sit on top of these and prevent this being an issue.
It is hard to say without seeing an example, but it is likely a z-index issue that is causing the problem.
By default Tabulator menus have a z-index of 10,000 if you have anything with a z-index higher than this it will sit over the menu.
To resolve this you simply need to add a bit of CSS after you have imported the tablator style sheet, that changes the z-index to be higher than any others on your page:
.tabulator-menu{
z-index: 99999999;
}
How to differentiate between repaint
A repaint occurs when changes are made to elements that affect
visibility but not the layout. For example, opacity, background-color,
visibility, and outline. Repaints are expensive because the browser
must check the visibility of all other nodes in the DOM — one or more
may have become visible beneath the changed element.
and reflow
Reflows have a bigger impact. This refers to the re-calculation of
positions and dimensions of all elements, which leads to re-rendering
part or all of the document. Changing a single element can affect all
children, ancestors, and siblings.
using chrome developer tools(or other similar tools)?
In Chrome Performance tab i see only repaint.
repaint
Is there any way to make a widget's config and move buttons be placed at the top of the widget itself.
As it is one has to hover over a widget in order to see which one of the items in the widget zone it belongs to. This is impossible though when the content of the widget is not in the same screen space (I had to zoom out in the browser in order to get the below screenshot) unless you zoom out and then zoom back in.
In this image, there are 3 seperate widgets (red, white and green respectively) in a single widget zone.
Also, when the mouse leaves the widget the widget config/move buttons are no longer visible.
One solution is to right-click on the widget and then scroll up to the config wheel but this is not something I want to tell my editors they have to do.
Has anyone else come across this problem and if so, how did they solve it?
This can happen when you have CSS conflicts. You can use Chrome Inspector, Firebug, or IE developer tool to investigate and see if anthing is 'overlapping' those buttons (often a floating div is overlapping the buttons and intercepting the 'click')
Then once you figure out a css class to make it work, just add it to your style sheet with ".EditMode " before it, this is a special class that is on the body when in page editor.
Example:
.EditMode .MyFloatingDivThatsCoveringTheWidgets {
z-index: 0;
}
I am currently using isotope to organize my portfolio. I found that if I decided to place elements inside an isotope item and make these elements' position as fixed, they will not displace fixed on screen. Instead, these elements will use the isotope item's x and y position as the initial screen position. For instance, if I place an element as position:fixed and left:0; top:0; this element will not display on the top left corner of the screen. Instead, it will display on the top left corner of the isotope item.
Another issue I encounter is that the z-index of the element inside of the isotope item is not independent. If I give the element a greater z-index than other isotope items, say if the element has the z-index of 100, and all isotope items have the z-index of 10, the "portfolio_display" will still display behind all isotope items.
To explain what I am trying to achieve:
I want to make the isotope items become clickable, and when it is being activated, a full screen portfolio display will show up and take over the screen.
I do know plugin such as lightbox 2 will work. However, I like to have my portfolio display have much richer functions than lightbox 2. I want to put case study, images, videos, in the full screen mode, and each screen can be format like web page. So my method is to put multiple formatted divs into an isotope item, and use javescript (written by myself) to control their visibility and scrolling. This method works until I started integrate isotope to my portfolio.
I imagine isotope created a little "web page" inside of the bigger "web page" so it dictates the z-index and the position inside of its own. I like to know if I can disable isotope's dictation to its sub elements without breaking its great functionality.
Thank you.
For your full-window display purposes, you can change the modal overlay technique in this demo to your purposes. No plugin needed, you can put whatever you want to show in there, not just use it as an easy self-made modal.
I'm trying to track down a z-index problem. I'm looking at the page in IE9's DOM Inspector, and I just can't figure it out.
I have one element with a z-index of 10000, and another with a z-index of 7000, and yet the z-index 10000 is drawing below the z-index 7000. Clearly somewhere in the hierarchy, something is setting a stacking context, but I've been browsing up and down the hierarchy and I haven't been able to find it.
Nothing other than these two elements, so far as I can see, has a z-index set. And nothing as a opacity value set. and I'm seeing this in FF5 and IE9, so it's not the old IE<7 stacking context bug.
Do any of the browsers have a tool that will tell me which element is setting a stacking context?
Thanks.
If you use Chrome https://github.com/gwwar/z-context is a simple extension to see:
If the current element creates a stacking context, and why
What its parent stacking context is
The z-index value
and important, like aprohl5 said: The z-index property can affect the stack order only if the position is explicitly set to fixed, absolute, or relative.
This is a nice way to mantain order with Sass https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/
For Chrome: the chrome 3d 'layer' tool does most of what you'd want I believe (similar to the other answer which is for MS Edge)
Find it in dev tools > overflow menu / 3 dots (hidden by default) > 'more tools' > 'layers'
https://www.youtube.com/watch?v=6je49J67TQk
The current of MS Edge (using the Chromium engine with a build of "Beta", "Dev", or "Canary") now features: "Debug z-index stacking content with 3D View in the Microsoft Edge DevTools"
"a new feature to help debug z-index stacking context. The general 3D View shows a representation of the DOM (Document Object Model) depth using color and stacking, and the z-Index view helps you isolate the different stacking contexts of your page."
Press F12 (Windows), and then select the "3D tab" in the lower pane (may have to click "...") to view a visual representation.
More information:
https://blogs.windows.com/msedgedev/2020/01/23/debug-z-index-3d-view-edge-devtools/
For Google Chrome and Firefox, I've created an open source extension that not only tells you if the element creates a z-index and why, but also shows a tree-like view of all stacking contexts in the page, and the stacking contexts that they're competing with regarding to the z-index value. You can see all these informations directly in the browser devtools, check out the github page for more info.
CSS stacking context inspector for Chrome
CSS stacking context inspector for Firefox
in newer versions of firefox you have 3D view by pressing Ctrl+Shift+I then clicking the 3D or 3D box icon to access
For z-index to work, you have to explicitly set the position to fixed, absolute, or relative.
Here's a great explanation: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/