Onclick bring element to front but keep in stacking order

JavaScript
#1

I am trying to make boxes overlap when someone clicks on them (like windows or mac ui), which I am doing, but I can’t think of a way to keep them in stacking position; when a window comes to front the two behind it get switched around.

The boxs are “findchat”, “login”, and “createaccount”
Here is the code I am running when a user clicks on one of these elements [initial is 10]:

function findchatbringto() {
	document.getElementById('findchat').style.zIndex = '20';
	document.getElementById('createaccount').style.zIndex = 'initial';
	document.getElementById('login').style.zIndex = 'initial';
	
	};
function createaccountbringto() {
	document.getElementById('createaccount').style.zIndex = '20';
	document.getElementById('login').style.zIndex = 'initial';
	document.getElementById('findchat').style.zIndex = 'initial';
	
	};
function loginbringto() {
	document.getElementById('login').style.zIndex = '20';
	document.getElementById('createaccount').style.zIndex = 'initial';
	document.getElementById('findchat').style.zIndex = 'initial';
	
	}
#2

Hi @assc, couldn’t you just increment the z index with every click? Like so:

2 Likes
#3

Thanks for the help here. I can’t make your idea work as in sometimes I need to click on the box more than once to bring it in front of the others, but I do think that the boxes are staying in the same order.

#4

No that only increments the existing z-index of that item. :slight_smile: The other items may have a higher z-index and you;d need to click multiple times to increase the current index. If you kept count in a variable instead you could set the highest using the variable.

Or if you want to return to normal then set back to auto.

It depends if you want a previous element to stay on top of the other element or revert back to where it was.

No the css initial value is ‘auto’ as per the specification.

2 Likes