Code to change "depth" of the UI element

CS Principles
1

Hi All,

I have a student who wants to have layers of objects that can be moved around. She wants to change the “depth” of these different elements. I know you can set the depth of items in design mode - I assume there is a way to do that with code too? I looked at setProperty but that didn’t seem to have what I was looking for.

Anyone else have ideas?
KT

1 Like
2

The only way to control layering from code is to set the z-index with setStyle(). By default all elements have a z-index of 0, so increasing any element’s z-index will put it at the top of the stack. Eg.

Demo app

onEvent("button1", "click", function(event) {
  setStyle("button1", "z-index: 1");
  setStyle("button2", "z-index: 0");
});
onEvent("button2", "click", function(event) {
  setStyle("button2", "z-index: 1");
  setStyle("button1", "z-index: 0");
});
1 Like