z- 색인 사파리 문제

사파리의 고정 요소에서 작동하는 Z- 색인에 문제가 있습니다. 파이어 폭스에서 스크롤링 사이트를 만들었고 간단한 텍스트 div에 대한 z-index를 지정하지 않아도 스크롤 될 때까지 다른 콘텐츠 뒤에있을 수있었습니다. Safari의 어떤 이유로 든 다른 모든 것들 앞에 나타납니다. 나는 그것을 위해 음의 z- 색인을 만들려고 노력했다. 여기에 대한 코드가 있습니다.z- 색인 사파리 문제

도움 주셔서 감사합니다.

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

출처

2013-04-13 TheImaginative

본인의 질문에 답변을하지는 않지만 왜 디스플레이를 전환하지 않는지 알고 있습니다. 디스플레이 : < not none >; 그것을 보이고 숨길 수 있습니까? – Jeffpowrs

@ JeffPowers - 작동 할 수 있습니다. 그게 Jquery로 끝났다고 가정하고 있습니까? (나는별로 모르겠다) – TheImaginative

나는 아래 답변에 그것을 게시 할 것이다. – Jeffpowrs

I을 유래 : 사용자 이름에 유래 암호를 사용 -

또한 여기에 당신이 사이트를 보려면 로그인해야합니다 (더 이해하는 데 도움을주는 경우를 볼 수있는 링크입니다 z-index으로 뭔가를 숨기려는 제안을하지 않았으므로 대신 display: none;을 시도해야합니다. 문제가 발생하지 않는다면 여전히 음수 인 z-index 값을 설정하지 않는 것이 좋습니다. ce이 값을 0 이상으로 유지합니다. 3 또는 4 다음은 귀하의 의견에 따르면 #post-16 #tagline 1 또는 2

편집

설정과 같은 높은 숫자로 다른 모든 것들의 Z- 인덱스를 설정하려고하면 .tags 및 .tagl을 숨기려. z-index을 무시하고 다음 CSS 규칙을 수행해야합니다.

.tags, .tagl { display: none; }

출처

2013-04-13 20:06:14 cereallarceny

잘 설명했는지는 모르지만 .tags와 .tagl은 내가 숨기려고하는 것입니다. 위의 링크를 편집하여 사이트를 볼 수 있습니다. – TheImaginative

해당 클래스를 숨기는 방법에 대한 내 개정 된 게시물을보십시오. – cereallarceny

이미 가지고있는 것을 바탕으로해야합니다. 정말 간단한 예가 될 것입니다. 스크롤 이벤트는 자주 호출되기 때문에 호출되는 것을 자주 조정할 수 있습니다.

#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-14 14:38:48 Jeffpowrs

z- 색인 사파리 문제

답변

관련 문제