Onclick brings element to front but keeps stacking order – JavaScript – SitePoint Forums

I’m trying to make the boxes overlap when someone clicks on them (like windows or mac ui), which I do, but I can’t see a way to keep them in stacking position; when a window comes to the front, the two behind are reversed.

The boxes are “findchat”, “login” and “createaccount”
Here is the code I run when a user clicks on one of these [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';
	
	}

Hi @assc, couldn’t you just increment the z-index on each click? Thereby:

Thanks for the help here. I can’t seem to get your idea to work because sometimes I have to click on the box more than once to bring it in front of the others, but I think the boxes stay in the same order.

No, it only increments the existing z-index of that element. Other items may have a higher z-index and you will need to click multiple times to increase the current index. If you kept the number in a variable, you can set the highest using the variable.

Or if you want to go back to normal, go back to auto.

It depends on whether you want a previous element to stay on top of the other element or return to where it was.

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