-
Notifications
You must be signed in to change notification settings - Fork 289
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Possible to change visual order or z-index? #567
Comments
def know the problem space, the visbug demo site can repro it really easily.
we could totally add a few hotkeys (just like the ones in design tools) to bump z-index up/down/max/negative:
should be a pretty easy to add! just writing and reading an inline style with some increment/decrement logic. this would be a cool addition. the question is then, which design tool shortcut do we adopt? is there a "most common" one? |
I bumped into visbug again today and really enjoyed playing around with "Position" tool in particular. It's so cool that we can drag things around in the browser! 😄
The problem is that when multiple elements on the page are positioned and overlap each other, then they follow the DOM order, making it hard to layer them correctly.☹️
Design tools all have a way of changing the visual order ("Bring forward" / "Bring to top") so it would be nice if Visbug could have something similar. Not sure what the UI would look like, since visbug doesn't make use of a custom right-click menu. Maybe could be a separate tool with its own keyboard navigation?
One potential issue is when stacking contexts are involved, which might require recursively finding the parent node and applying z-index on that until it "works". But I think a user should be able to do that manually if the keyboard shortcut feels ergonomic enough.
Also, maybe some of the work already done for the
/zindex
inspector tool might come in handy?The text was updated successfully, but these errors were encountered: