JSFiddle - React, Tailwind, and code Playground

by yagudaev

HTML

<div id="example1">
    Getting  an z-index set on an element
</div>

<div id="example2-parent">
    Getting  an z-index set on the container
    <div id="example2-child"></div>
</div>


<div id="results">
    <h2>Results:</h2>
</div>

<div id="solutions">
    <h2>Solutions:</h2>
</div>

CSS

#example1
{
    z-index: 4;
}

#example2-parent
{
    z-index: 4;
}

#results
{
    margin-top: 20px;
    font-weight: 700;
}

#solutions
{
    margin-top: 20px;
    font-weight: 700;
}

JavaScript

// lets try getting the z-index from those examples
$('#results').append('<p>Example 1 z-index = ' + $('#example1').css('z-index') + ', expected = 4</p>');

$('#results').append('<p>Example 2 z-index = ' + $('#example2-child').css('z-index') + ', expected = 4</p>');

// lets do some stuff to solve the problem (we can do it in the css too, but javascript is
// more fun ;)
$('#example1').css('position', 'relative');
$('#example2-parent').css('position', 'relative');
$('#example2-child').css({ position: 'relative', 'z-index': 'inherit' });

// IE7 needs to get the z-index directly from the parent
var childIndex = parseInt($('#example2-child').css('z-index'), 10) || $('#example2-child').parent().css('z-index');

// and try that again
$('#solutions').append('<p>Example 1 z-index = ' + $('#example1').css('z-index') + ', expected = 4</p>');

$('#solutions').append('<p>Example 2 z-index = ' + childIndex + ', expected = 4</p>');