z-index 또는 : 가끔씩 움직이면 가끔씩 작동하지 않습니다.

Question

정말 무슨 일이 일어나는 지 무서워요. 약간의 jQuery를 사용하여 CSS 3D 변환을 사용하여 약간의 애니메이션을 제작하고 있습니다.

코드를 작성하는 데 너무 오래 걸리므로 this jsfiddle을 작성하십시오.

어쨌든, 구조는 (이 article를 들어, 비 공급 업체의 프리픽스와 함께, 단지 전체 코드입니다) 모두에서 매우 간단합니다 :

<section> 
    <article> 
    <h1>2012</h1> 
    </article> 
    <article> 
    <h1>2013</h1> 
    </article> 
</section> 

.article { 
    position: absolute; 
    width: 370px; 
    height: 250px; 
    margin-bottom: 120px; 
    background-size: cover; 
    background-position: center; 
    border-radius: 10px; 
    background: grey; 
    z-index: 50; 
    box-shadow: -5px 0 3px -4px rgba(0, 0, 0, 0.6); 
    -webkit-box-reflect: below -10px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2) 0%, transparent 40%, transparent 100%); 
    transition: margin-top 0.3s, width 0.3s, height 0.3s, -webkit-transform 0.3s, top 0.3s, left 0.3s; 
    transform: perspective(900px) rotateY(25deg) translateZ(-90px); 
} 

section article:hover { 
    margin-top: -30px; 
    width: 430px; 
    height: 310px; 
    cursor: pointer; 
    box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.2); 
    transition: all 0.8s; 
    transform: perspective(100px) rotateY(0deg) translateZ(0); 
} 

문제는, 때 I 페이지에 액세스하면 :hover 가끔 작동하고 때로는 작동하지 않습니다. 그것은 때로는 다른 요소가이라는 기사 위에있는 것 같습니다. 더 이상 요소가 없다는 것을 실제로 볼 수는 없습니다. z-index을 추가 할 필요가 없습니다 (기사를 클릭 한 후 나타나는 .activo 클래스가 있습니다). 때로는 작동하지 않는 경우도 있습니다 ...

link to example을 시도해보고 몇 번 다시로드하십시오. Safari, Chrome 및 Firefox에서 이러한 문제가 발생합니다. FF로 더 잘 작동합니다.

그냥 것을 내가 페이지를 다시로드 내가 마우스 articles- -hover와 요소에 빠르게 얻을 를로드하는 동안 예상대로 다음 이를 작동 할 때, 발견했다. 호버가로드 될 때까지 기다렸다가 작동하지 않습니다.

또한, jQuery가 다음 기사를 관리하는 비트가 있습니다. 나는 hover 형제 요소 뒤에 장소를 찾아야 만하고 절대 위치 요소이기 때문에 호버 한 것에도 margin-right을 사용할 수 없기 때문에 JavaScript로 처리해야합니다. 클릭 한 후에는 절대 커버해야하므로 절대 위치에 있어야합니다. 전신.

$('article').hover(function (event) { 
    $(this).nextAll('article').each(function() { 
     izquierda = izquierda_original[$(this).attr('id')].izquierda + 360; 
     $(this).css('left', izquierda + 'px'); 
    }); 
}, function (event) { 
    $(this).nextAll('article').each(function() { 
     izquierda = izquierda_original[$(this).attr('id')].izquierda; 
     $(this).css('left', izquierda + 'px'); 
    }); 
}); 

izquierda_original[] 각 요소의 원래 값 left 함유 단지 목적이다.

미리 감사드립니다.

편집 마지막으로 문제는 body 요소임을 알 수 있습니다. 그것의 높이가 기사를 생성 할 때, 나는 그들을 공중 선회 할 수 없다. 이것은 더욱 이상합니다. 그것은 body가 그 (것)들을 떠들기 같이 그 아이 성분이다이다.

Answer 1

어떤 이유로 body 태그가 요소 위에 겹쳐져 있습니다.

다음은 나를 위해 고쳐 준 것입니다.

body{ 
z-index: 1; 
position: relative; 
} 

은 다음 섹션을 z-index 높은 추가 :

우선과 같이 body 태그에 z-index를 추가

section{ 
z-index: 2; 
position: relative; 
} 

이것은 당신의 배경을 유지하고 기능적인 요소를 유지한다.