2

我在使用 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;
}
4

2 回答 2

0

我不建议尝试用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; }
于 2013-04-13T20:06:14.227 回答
0

基于你已经拥有的。一个非常简单的例子是。您可能希望经常调用滚动事件，因为它会被调用很多。

#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();
  }
})
于 2013-04-14T14:38:48.037 回答