Allow the z-index of an element to be set

[HokieGeek]

I have the following layout for a Lenovo ThinkPad T430: http://www.keyboard-layout-editor.com/#/gists/8f43f1fe04d9a8f390c1

I recognize that this is an edge case, but I want the TrackPoint layer to be above the keycaps but so far none of the custom styles I have tried have been successful.

[ijprest]

I've considered this before, and I'll leave it on the backlog. I haven't done it yet, because it is niche, and I don't want to clutter up the UI much more than it already is. (The UI is in need of a re-think.)

But here's how you can achieve the effect you're going for using custom styles:

• For your keycap legend, write: <div class='top'><i class='fa fa-circle'></i></div>
• In 'Custom Styles', write: .top { display:inline-block; margin:-25%; z-index: 1; }

Only block elements can have a z-index applied, so we use a <div> around the legend. We use inline-block and margin to ensure that the legend will get positioned correctly on the keycap. (Not really sure why the negative margin was necessary, but without it all the legends were shifted down & right.)

P.S., the easiest way to position the decal is to horizontally line it up with the 'B' key, then make it the full height of two rows. Put the legend in the center position, and it should be exactly where you want it.

[HokieGeek]

Awesome. That works. I had tried manipulating the existing divs but hadn't considered just adding a new one. Thanks!