Jquery 使用变换时的堆叠顺序（z索引）

在小提琴下面，我有一个右导航，它有一个子菜单，当用户在搜索字段中输入文本时，子菜单应该出现。自动取款机。我不得不将搜索框放在导航栏（

.link list

）之外，因为包含子菜单的元素出现在它上面，因此无法输入。在最终解决方案中，搜索字段应位于

链接列表中

如果您将其悬停，子菜单将折叠，但我希望它在用户在搜索字段中输入任何内容之前不可见。如果清除了搜索字段或单击了带有
.close sub
的链接，则应将其关闭

我需要做些什么来实现这一点，已经尝试了
z-index
、代码顺序、固定和绝对位置，但没有成功


HTML:

<input type="search" id="srch"></input>
<div class='link-list'>
<h1>Navbar</h1>
<div class="lnk">
    <a href="#">monkey</a>
    <br />
    <a href="#">bizniz</a>
    <br />
    <a href="#">monkey</a>
    <br />
    <a href="#">bizniz</a>
</div>
<div class='sub'>
  <ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit
      <ul>
        <li>Phasellus iaculis neque</li>
        <li>Purus sodales ultricies</li>
        <li>Vestibulum laoreet porttitor sem</li>
        <li>Ac tristique libero volutpat at</li>
      </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
  </ul>
</div>
</div>

.link-list {
  position: fixed;
  right: 0px;
  bottom: 0;
  top: 0;
  width: 16em;
  perspective: 180em;
  background: pink;
  z-index: 10;
}

.sub {
  z-index: 2;
  width: 100%;
  height: 100%;
  background: dimgrey;
  transition: .6s;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 16em;
  overflow: auto;
  transform-origin: 100% 100% 0;
  transform: rotateY(-180deg);
}

.link-list:hover .sub {
  transform-origin: 100% 100% 0;
  transform: rotateY(0deg);
  position: fixed;
  right: 16em;
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}

h1 {
  background: salmon;
  z-index: 99;
}

你想要像这样的东西吗


$（'.js search'）。在(
“propertychange更改键控输入粘贴”，
函数（）{
变量$naviSub=$（'.js naviSub'）；
var isShown=$naviSub.data（'is-show'）；
if（isShown！==Boolean（$（this.val（）））{
$naviSub.data（'is-show'，！isShown）
.toggleClass（“显示导航子菜单”）；
}
}
);
$（'.js close'）。在（'click'，function（）上{
变量$naviSub=$（'.js naviSub'）；
$naviSub.data（'is-show'，false）
.removeClass（“显示导航子类”）；
});
.navi{
位置：固定；
右：0；
底部：0；
排名：0；
宽度：16em；
-webkit透视图：180em；
透视图：180em；
背景：粉红色；
}
.navi___main{
位置：相对位置；
z指数：2；
}
.navi__头{
背景：鲑鱼；
}
.navi___sub{
位置：绝对位置；
z指数：1；
宽度：100%；
身高：100%；
背景：灰色；
排名：0；
右：16em；
底部：0；
填充物：5px；
-webkit转换来源：100%100%；
-ms变换原点：100%100%；
变换原点：100%100%；
-webkit变换：旋转（-180度）；
-ms变换：旋转（-180度）；
变换：旋转（-180度）；
-webkit过渡：0.6s易入易出；
过渡：0.6s缓进缓出；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.navi\u sub\u如图所示{
-webkit变换：旋转（0度）；
-ms变换：旋转（0度）；
变换：旋转（0度）；
}
.navi___关闭{
位置：绝对位置；
排名：0；
左：5px；
填充物：5px；
光标：指针；
颜色：灰色；
}
.navi_u关闭：悬停{
颜色：红色；
}
.navi__列表{
溢出y：自动；
}

导航栏






×

Lorem ipsum dolor sit amet
献祭精英
马萨的整型分子色素
前鼻孔易激综合征
阿利奎姆韦利特酒店

亚库利斯内克相思
ultricies钠皮
左前庭
Ac特里斯蒂克自由党


弗林利亚湖门酒店
埃尼安·希特·埃拉特·努克
埃吉特·波特提托·洛雷姆

您在
fiddle
和
stackoverflow
中的html代码是不同的。我是否遗漏了什么…？我注意到的唯一区别是缩进，我会在这里添加CSS，以防有任何帮助。小提琴指向@Dan Ovidiu Boncut提出的问题。当我在chrome上点击这个链接时，我得到了正确的页面，在firefox上试过，得到了你得到的那个。古怪。无论如何，它现在更新了。真的。。。。！！！那是伟人。。。。应该向……报告。。好吧，现在让我看看你得到了什么……这正是我要找的。谢谢