Question

我在使用z-index处理safari中的固定元素时遇到了一些麻烦。我在firefox中创建了滚动网站，甚至不需要为简单文本div指定z-index，以便在向下滚动到其他内容之后。但出于某些原因，在Safari中它出现在其他一切的前面。我尝试为它创建一个负z-index，为其他所有东西创建正z-index但没有变化。这是它的代码。

感谢您的帮助！

此处还有链接查看它是否有助于更有意义（您必须登录才能查看该网站 - 使用用户名stackoverflow密码：stackoverflow

http://lynchbryan.com/wp-login

<div id="tagline">
   <span class="tags">We</span><span class="tagl">partner</span> <span class="tags">with clients to</span> </br><span class="tagl">cultivate</span> <span class="tags">the</span> <span class="tagl">potential</span><span class="tags"> of people</span>
</div>

#post-16 #tagline {
    position:fixed;
    bottom:50%;
    text-align: center;
    left: 50%;
    z-index:-999;
}

#post-16 .tags {
    font-family:'AndesLight';
    font-size:23px;
    color:#ffffff;
    padding:0 10px;
}

#post-16 .tagl {
    font-family:'ThirstyRoughReg';
    font-size:50px;
    color:#ffffff;
}

Answer 1

我不建议尝试使用z-index隐藏某些内容。相反，你应该尝试display: none;。如果这不是您遇到的问题，那么我仍然不建议设置负z-index值。将这些值保持在0或以上是一种好习惯。尝试将其他所有内容的z-index设置为更高的数字（如3或4），然后将#post-16 #tagline设置为1或2。

修改

根据您的评论，您要隐藏.tags和.tagl。您应该执行以下CSS规则，忽略z-index：

.tags, .tagl { display: none; }

Answer 2

基于你已经拥有的东西。一个非常简单的例子就是。你可能想要节制常常调用滚动事件，因为它会被调用很多。

#post-16 #tagline {
  position:fixed;
  bottom:50%;
  text-align: center;
  left: 50%;
  display: none;
}

//cache the element so you only need to look it up once.
var $tag = $('#post-16 #tagline');

//name space the scroll event
$(document).on('scroll.show-tagline' function (e) {
  //this is how far the document has been scrolled in pixels
  var scrolled = $(this).scrollTop();
  //what ever value you want
  if ( scrolled > 300 ) { 
    $tag.show();
  } else {
    $tag.hide();
  }
})

safari中的z-index问题

2 个答案: