1. Create a rectangle and make it yellow

2. Make a copy of the rectangle and make it red

Now move the red rectangle on top of the yellow. Use the key arrow to place it exactly on top of the other…

Suddenly the two rectangles switches place. The Z-value of the red rectangle is changed to (in my case) -1 and therefore it is placed below the yellow. With the arrow keys move the red rectangle 1 pixel up and 1 pixel down, and suddenly it’s back in front.

9 answers

This is a designed behavior, it may be strange but here is how we think: when user move an element into the area for another element, most likely user want to place it over the stilly element, so ForeUI will automatically change the z index of the moving element to make sure it will not be covered by the stilly element… If you press Ctrl+Z to undo the last command, you will see the z index be restored.


Sorry, I don’t understand… Could you maybe give an example, and what’s a “stilly” element?


Ok, I just make a GIF animation to explain this. You can click the image below to view the animation.


The stilly element is the element that is not moved, in the example the window is the stilly element.


Ahh, ok. Now I understand the behaviour. Thanks!


I’m working on a prototype containing many elements (tables, drop-down menus, date controls incl. the date picker etc.). The automatic change of the z-layer when moving the elements around is actually making it harder to design the prototype.

My custom drop down menus consist of

– A rectangle for the frame of the control

– An image for the arrow pointing down

– A textEdit box to display the selected value

– Another rectangle the size of the control which makes the menu list visible when clicked

– A menu list containg the different values

Once I get a drop down list like that working in simualtion, it might be a problem moving it to a different position while editing, as the consequences of changing its position can be rather unpredictable. I just tried it, and after moving it, it didn’t “work” in simulation as the clickable rectangle was actually automatically moved to a lower layer “behind” the drop down control.

Could it somehow be a setting to use that feature or not?


Alright, we will provide a setting option to turn on/off this feature.


Ok, that sounds great.


This option is provided in V1.60, it is in the menu “Advanced->Settings” and belongs to the “Edit” category.


This question is now closed