使用变换时的堆叠顺序（z-index）

Question

在下面的 fiddle 处，我有一个带有子菜单的右侧导航，当用户在搜索字段中输入文本时，应该会出现子菜单。自动柜员机。我不得不将搜索框放在导航栏之外 (.link-list)，因为包含子菜单的元素出现在它上面，因此无法输入。在最终解决方案中，搜索字段应该在 .link-list。

如果您将鼠标悬停在子菜单上，它会折叠起来，但我希望它在用户在搜索字段中输入任何内容之前不可见。如果搜索字段被清除或单击带有 .close-sub 的 link，它应该关闭。

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

JSFIDDLE

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>

CSS:

.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;
}

Answer 1

你想要this这样的东西吗？

$('.js-search').on(
    'propertychange change keyup input paste',
    function() {
        var $naviSub = $('.js-navi-sub');
        var isShown = $naviSub.data('is-shown');

        if (isShown !== Boolean($(this).val())) {
            $naviSub.data('is-shown', !isShown)
                    .toggleClass('navi__sub_shown');
        }
    }
);

$('.js-close').on('click', function() {
    var $naviSub = $('.js-navi-sub');

    $naviSub.data('is-shown', false)
            .removeClass('navi__sub_shown');
});

.navi {
    position: fixed;
    right: 0;
    bottom: 0;
    top: 0;
    width: 16em;
    -webkit-perspective: 180em;
    perspective: 180em;
    background: pink;
}

    .navi__main {
        position: relative;
        z-index: 2;
    }

    .navi__header {
        background: salmon;
    }

    .navi__sub {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: dimgrey;
        top: 0;
        right: 16em;
        bottom: 0;
        padding: 5px;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -webkit-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        -webkit-transition: 0.6s ease-in-out;
        transition: 0.6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

        .navi__sub_shown {
            -webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }

    .navi__close {
        position: absolute;
        top: 0;
        left: 5px;
        padding: 5px;
        cursor: pointer;
        color: gray;
    }

        .navi__close:hover {
            color: red;
        }

    .navi__list {
        overflow-y: auto;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="navi">
    <div class="navi__main">
        <h1 class="navi__header">Navbar</h1>
        <input type="search" id="srch" class="js-search"/>
        <div class="lnk">
            <a href="#">monkey</a>
            <br/>
            <a href="#">bizniz</a>
            <br/>
            <a href="#">monkey</a>
            <br/>
            <a href="#">bizniz</a>
        </div>
    </div>
    <div class="navi__sub js-navi-sub">
        <span class="navi__close js-close">×</span>
        <ul class="navi__list">
            <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>

使用变换时的堆叠顺序（z-index）

Stacking order (z-index) when using transform

html

css

jquery

z-index