z-index Visualizer

preview.md

zindex.js

/**
 * Copyright 2019 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
**/
(() => {
    // Fun prior art https://gist.github.com/paulirish/211209
    const all = document.querySelectorAll('*');
    const filtered = Array.from(all)
      .filter(el => window.getComputedStyle(el).getPropertyValue('z-index') !== 'auto');
    filtered.forEach(el => {
        let color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
        let position = window.getComputedStyle(el).getPropertyValue('position');
        if (position === 'absolute' || position === 'relative') {
            el.style.position === 'relative';
        }
        let overlay = document.createElement('div');
        let label = document.createElement('span');
        let zindex = window.getComputedStyle(el).getPropertyValue('z-index');
        let contrast = '#' + (Number('0x' + color.substr(1)).toString(10) > 0xffffff / 2 ? '000000' : 'ffffff');
        label.textContent = `z-index: ${zindex}`;
        overlay.style.cssText = `
            outline: 1px solid ${color};
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;`;
        label.style.cssText = `
            background: ${color};
            color: ${contrast}; 
            textIndent: 0;
            padding: 5px 10px;
            border-radius: 3px;
            white-space: nowrap;
            font-size: 14px;
            font-family: monospace;
            font-weight: normal;
            letter-spacing: normal;
            line-height: 1.1;`;
        overlay.appendChild(label);
        el.appendChild(overlay);
    });
})(document);