CSS Absolute Positioning and Z-index on top - css

Question

With the following simplified code,
$("[data-position]").each(function() {
$(this).css({
position: 'absolute',
left: $(this).data('position')[0] + '%',
top: $(this).data('position')[1] + '%',
})
});
ul {position: relative;
width: 15em;height: 15em;
background: #0af;
list-style: none}
strong,em {padding: .5em}
strong {background: #000; color: #fff;z-index:50}
em {display: none;background: #fff;z-index:-1}
li:hover em{display: block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-position="[20,20]">
<strong>A</strong>
<em>This is an ay</em>
</li>
<li data-position="[10,10]">
<strong>B</strong>
<em>This is a bee</em>
</li>
<li data-position="[30,30]">
<strong>C</strong>
<em>This is a see</em>
</li>
</ul>
The :hover-displayed element gets hidden by following siblings.
I tried to look at many similar questions and answers on this website but could not come up with an interesting answer. Changing the z-index or opacity levels do not work.
What could bring a hover-displayed element to the very top of z-index, whatever the position of siblings in the dom?

Answer 1

Go through the link to get the solution
em {
background: #fff none repeat scroll 0 0;
display: none;
position: relative;
z-index: 1000;
}

Answer 2

You need to add z-index:1;position:relative in em class.
$("[data-position]").each(function() {
$(this).css({
position: 'absolute',
left: $(this).data('position')[0] + '%',
top: $(this).data('position')[1] + '%',
})
});
ul {position: relative;
width: 15em;height: 15em;
background: #0af;
list-style: none}
strong,em {padding: .5em}
strong {background: #000; color: #fff;z-index:50}
em {display: none;background: #fff;z-index:1;position:relative}
li:hover em{display: block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-position="[20,20]">
<strong>A</strong>
<em>This is an ay</em>
</li>
<li data-position="[10,10]">
<strong>B</strong>
<em>This is a bee</em>
</li>
<li data-position="[30,30]">
<strong>C</strong>
<em>This is a see</em>
</li>
</ul>