CSS绝对定位和Z-index在上面

Question

使用以下简化代码

$("[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>

：hover-displayed元素被以下兄弟姐妹隐藏。

我试图在这个网站上查看许多类似的问题和答案，但无法得出一个有趣的答案。更改z-index或不透明度级别不起作用。

什么可以将悬停显示的元素带到z-index的顶部，无论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

您需要在z-index:1;position:relative课程中添加em。

$("[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>