Question

问题是我有2个div：一个容器是一个链接，另一个是盒形容器。该链接有一个position:fixed;，它飞过容器div，所以我试图给链接一个带负值的z-index，结果是当应用具有负值的z-index时，悬停状态不起作用除非我滚动容器div的相同数量的高度。所以我滚动了3次，悬停状态再次起作用。

HTML

<div id="div-1">
 <div class="container"></div>
</div>

<!-- other divs like 5 or 6 of 'em -->

<div id="div-2">
 <a href="#">This is a link</a>
</div>

CSS

#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:0;
}

#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
 }

重要的是：除非我点击某个按钮，否则容器会被Jquery隐藏。

$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
    var target = $(e.target);
if (!target.is("##button-f")) {
  $(".container").toggle();
}
});
});

我已经采用了我能想到的所有可能（其他想法）。我尝试做相反的意思，给容器一个z-index正值vales并离开锚点，但这留下了同样的问题

更新我将尝试更改css属性＆＃34; z-index＆＃34;但仅在容器按钮切换时

因此链接将具有z-index:-9;，但仅当切换容器以进行查看以及何时切换回z-index时，将删除或不应用z-index。我无法确定如何用jquery编写这个我试过这个

    $(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle(); 

$("#div-2 a").css("z-index", -9); 

    var target = $(e.target);
if (!target.is("##button-f")) {
  $(".container").toggle();
}
});
});

当我在z-index上切换容器时，这个唯一的结果将被应用，但是当我切换它的时候，它仍然存在，当容器是什么时，如何删除z-index或使其等于z-inedx:99;切换了？

对此问题只有任何其他答案表示赞赏。

Answer 1

您是否尝试过将z-index分配给＃div-2？

您需要为其指定一个能够为其提供z-index的位置。试试这个：

#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:2;
}

#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
position: relative;
z-index:1; 
 }

Answer 2

我不知道你的代码中究竟是什么，但是你提供的js会查看你所拥有的if部分（## button-f），所以我们在这里发现了一个错误，我们确实需要这行吗？就像我们一样在JS中不需要'container'.hide（）行。现在你必须滚动'a'某个高度，因为你为＃div-1设置了未隐藏的高度。所以你需要滚动的高度。那么我对你的代码做了什么改变 1.切割div-1的高度并将其放置到.container类。你没有提供a：hover类，所以我将其添加到并删除一些不必要的CSS。如果您有任何其他问题，请在评论here

中向我询问

$(document).ready(function() {

 $("#button-f").click(function() {
     $(".container").toggle();
   });
  });

   button {
  width: 13%;
  height: auto;
}
#div-1{
width:100%;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
 }
.container {
   height:290px;
  display:none;
  border: 1px solid red;
   
}

#div-2 a {
  width: 13%;
  height: auto;
  padding: 0.5em 2.3em;
  display: block;
  positon:fixed;
  float:right;
  font-weight: 500;
  font-size: 1.09em;
  text-align: center;

  text-decoration: none;
  border-radius: 10px;
 

}

#div-2 a:hover {
  background: black;
  color: white;
}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
 
<body>
 <button id="button-f">
    button
 </button>
 <div id="div-1">
   <div class="container">tagasdgasdgasdgas</div>
 </div>

 <!-- other divs like 5 or 6 of 'em -->

 <div id="div-2">
   <a href='#'>This is a link</a>
 </div>
</body>

Answer 3

目前还不清楚你想要什么，但照片有所帮助，虽然看起来你想要容器上方的链接，看起来好像你没有？

整个目的是使锚点处于较低的索引中，因此当切换/查看容器时，链接不会设置在容器的顶部。

但是您希望链接在悬停时始终作出反应。因此，我假设您无法弄清楚为什么当容器打开时它不会徘徊，您仍然可以看到链接，所以从逻辑上讲，您至少可以将鼠标悬停在链接的可见部分。

它不是jQuery，而不是.container。它是.container的容器A.K.A. #div-1。 #div-1宽度始终是100％，即使您没有这种风格，它也会100％仍然是因为如果没有明确的宽度分配给哪个块，它。
- 解决方案：给#div-1更小的宽度。
你有一个固定的链接，但没有coords。你不能期望一个固定的元素能够站立起来，如果它不知道在哪里站立，它就像一个固定的元素。此外，如果您有任何positioned元素，并且您希望在其他元素之间进行互动，那么也要定位这些元素，div-1现在是position:relative以及链接的z-index属性div-1现在正常运行。
- 解决方案：提供#div-2 a top和left或right和bottom属性。授予#div-1 position属性，以便z-index正常运行。

所有详细信息都在来源中注释。

PLUNKER

段

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
    }
    #div-1 {
      overflow-y: auto;
      overflow-x: hidden;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      border: 1px solid red;
      width: 200px;
      /*Enable this and it will block link*/
      /*width:100%;*/
      height: 290px;
    }
    .container {
      /* This saves you an unnecessary step in jQuery */
      display: none;
      width: 200px;
      height: 290px;
      background: orange;
    }
    #div-2 a {
      width: 13%;
      height: auto;
      padding: 0.5em 2.3em;
      display: block;
      position: fixed;
      font-weight: 500;
      font-size: 1.09em;
      text-align: center;
      background-color: none;
      text-decoration: none;
      outline: none;
      /* It's not clear whether you want the link above or
      | below the container. If above, simply change to
      | z-index: 2
      */
      z-index: 0;
      /* If you have a fixed element give it coords, otherwise       
      | it doesn't know where it should stand and behavior
      | will be unexpected.
      */
      top: 10%;
      left: 125px;
    }
    #div-2 a:hover {
      background: red;
      color: white;
    }
    /* FLAG is just to test the accessibility of the link */
    #FLAG {
      display: none;
    }
    #FLAG:target {
      display: block;
      font-size: 48px;
      color: red;
    }
  </style>
</head>

<body>
  <button id='button-f'>F</button>
  <div id="div-1">
    <div class="container">Container is open</div>
  </div>

  <!-- other divs like 5 or 6 of 'em -->

  <div id="div-2">
    <a href="#FLAG">This is a link</a>
    <span id='FLAG'>This link is accessible now!</span>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    /* This is the jQuery you need to accomplish what you want.
    | The rest was redundant and unnecessary.
    */
    $(document).ready(function() {

      $("#button-f").click(function(e) {
        $(".container").toggle();

      });

    });
  </script>
</body>

</html>

＆＃13;

应用z-index时，悬停状态不起作用

3 个答案:

段