CODEWITHSUNDEEP
javascripthtmlcss
user3715648
user3715648

Reputation: 1588

Bring an element in front of others that have the same z-index

The user can press a button to create new divs on the screen. Each div is the same and has the same z-index. Newer elements display in front of older elements. The user has the ability to drag around the elements. I would like it so that when a user drags an element, that element is now permanently in front of the other elements (until a different one is created/dragged).

Is it possible to do this without keeping track of z-index somewhere in JS and increment it on creation/click? I'd like to avoid this if possible. Is there some way I can use jQuery or something to make a clicked element act as if it was recently created (which I guess is just determined by position in the DOM?)

Upvotes: 0

Views: 1382

Answers (2)

Strikeskids
Strikeskids

Reputation: 4052

I assume you are doing something like

container.appendChild(newDiv)

Now, when you click and drag an element, you can move it to the front.

var parent = recentlyClicked.parentElement // or container
parent.insertBefore(recentlyClicked, parent.firstChild)

This inserts your desired div as the first child of its parent, which will move to the top.

Edit: it appears that elements later in the DOM are the ones that are shown on top. In that case, you'll probably want to append the child instead.

recentlyClicked.parentElement.appendChild(recentlyClicked)

Upvotes: 2

timehat
timehat

Reputation: 135

On click you could add a class to the element where the CSS targeting that class has a slightly higher z-index. This is probably the cleanest way to do it (no keeping track of z-indexes, just toggling the existence of that class on mouse down & mouse up.

Another idea (not sure if it'd work, but might be fun to try) would be to add a tabindex="0" to all the elements. They can now receive focus. Then in your CSS add a ":focus" state selector targeting those elements. Increase their z-index with that. I don't recall if the focus happens on mouse down or after a full click. It might bring along other side effects line outlines on the element you don't want. And mess with the usability of the tab key on your website. I'd probably not use this unless it's somehow really much simpler in a non-production circumstance.

Upvotes: 0

Related Questions