Z- 인덱스 속성이 예상대로 작동하지 않습니다.

Question

현재 마음이 필요한 사이트에서 작업 중입니다. 나는 자바 스크립트와 CSS를 사용하여 마음을 만들 : 당신이 볼 수 있듯이,

이

heart(282, 69, "absolute", 230, 0); 

그러나, z-index는 아무것도되지 않습니다 내가 현재 사용 상자에서 큰 마음을 넣을려고

function heart(x, y, pos, width, r) { 
    var height = width + (width/2 + 1); 
    var heart = "position:" + pos + ";left:" + x + "px;top:" + y + "px;width:" + width + "px;height:" + height + "px;transform: rotate(" + r + "deg);-moz-transform: rotate(" + r + "deg);-webkit-transform: rotate(" + r + "deg);"; 
    var slices = "left:" + width + "px;width:" + width + "px;height:" + height + "px"; 
    $("body").append('<div class="heart" style="' + heart + '"><div class="slice" style="' + slices + '"></div><div class="slice2" style="' + slices + '"></div></div>'); 
} 

예 : JSFiddle 예.

유니크 셀렉터 (*)의 z-index을 0으로 설정하려고 시도했지만 상자의 z-index을 10 !important;으로 변경했지만 작동하지 않습니다. 나는 왜 이것이 일어나고 있는지에 대해 의아해하지만, 나는 그것이 역동적 인 마음과 관련이 있다는 것을 확신한다. 고맙습니다.

Answer 1

z-index이 작동하려면 요소를 배치해야합니다. visual formatting modal을 참조하십시오.

이 경우 상자에 position:relative을 간단하게 추가 할 수 있습니다.

UPDATED EXAMPLE HERE

.welcome { 
    z-index:10; 
    position: relative; 
    background: #fff; 
    margin: 0 auto; 
    width: 200px; 
    padding: 100px; 
    text-align: center; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; 
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; 
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; 
} 

중 하나 !important에 대한 필요가 없습니다. z-index를 사용하려면

Answer 2

, 당신의 <div>들 그래서 당신은 그런 position:relative;

을가한다 추가 할 필요가 마음 위의 .welcome을 표시하기 위해 (디폴트)

position: static; 수 없습니다 작업. 당신의 .welcome 상자가 정적 인 위치를 가지고 있기 때문에 당신의

.welcome { z-index: 10 !important } 

선언이 어떤 영향을되지 않도록

Answer 3

귀하의 Z-지수는 작동하지 않습니다. 이 때문에 z-index:0의 하트는 여전히 위에 있습니다.

중 하나

가)는 그것의보다 다른 무언가에 z-index: -1

.heart { z-index: -1 } 

jsFiddle

B) 세트 .welcome의 position에 마음을 설정,이 문제를 해결하려면 초기 정적 위치.

jsFiddle

.welcome { position: relative } 

그리고 !important을 잃고, 그 나쁜 습관이다.