z- 인덱스가 작동하지 않는 경우

나머지 레이아웃에는 영향을주지 않는 이벤트 위로 마우스를 가져 가려고합니다. Z- 인덱스가 그렇게하는 것 같지만 작동시킬 수는 없습니다. 나는 CSS를 고수하려고 노력하고 있지만 jQuery는 할 수있다.z- 인덱스가 작동하지 않는 경우

전체 응용 프로그램 : http://jsfiddle.net/9cRdq/

HTML

<div class="big-square" id="br"> 
    <div class="little-square" id="br-tl"></div> 
    <div class="little-square" id="br-tr"></div> 
    <div class="little-square" id="br-bl"></div> 
    <div class="little-square" id="br-br"> </div> 
</div>

CSS

.big-square 
{ 
    position: relative; 
    z-index: 1; 
    font-size: 2em; 
    float: left; 
    width: 30%; 
    min-width: 4em; 
    min-height: 4em; 
    margin: 0 2% 2% 0; 
    background: #000; 
} 
.little-square 
{ 
    position: relative; 
    z-index: 1; 
    cursor: pointer; 
    float: left; 
    width: 48%; 
    height: 48%; 
    background: #cd2626; 
} 
.little-square:hover 
{ 
    z-index: 1000; 
}

JQuery와

$(document).ready(resizeBigSquare); 
window.onresize = resizeBigSquare; 
function resizeBigSquare() { 
    $('.big-square').css(
     { 
      'height': ($('.big-square').width() * .85) + 'px', 
      'line-height': ($('.big-square').width() * .85) + 'px' 
     }); 
    $('.little-square, .rectangle-top, .rectangle-bottom').css(
     { 
      'line-height': $('.little-square').height()+ 'px' 
     }); 
}

출처

2012-08-22 user1134179

플로트와 위치를 함께 사용할 수 없다고 생각합니다. 기본적으로 다른 요소가 배치 된 후에 문서를 렌더링합니다. 위치 속성과 동일합니다. 그래서 만약 당신이 z-index hover를 사용하여 float을 없애고 싶다면 생각합니다. –

플로트를 제거했지만 여전히 작동하지 않습니다. – user1134179

js 제발 제발? –

호버에 대한 귀하의 z-index 변화가 작동 나타나서 t 괜찮아. 실제로 here's a fiddle은 box-shadow을 사용하여 작동하는 것으로 나타납니다. 귀하의 div.little-square은 실제로 그 위에 올라있을 때 동료보다 높습니다. 그렇지 않으면 box-shadow이 다른 사람들보다 뒤처집니다.

주에만 호버에 div.little 평방의 크기를 변경하고자하는 경우 z 축에, 아무것도 (크기, 색상,)

을 겹쳐 순서에 영향을 z-index 그 (그리드를 깨지 않고) 각 사각형 내부에 자식 요소를 만드는 것을 고려하십시오. 그런 다음 새 하위 요소에 position:absolute을 적용하고 작은 사각형의 일부 속성을 해당 요소로 전송 한 다음 이에 따라 호버 상태로 스타일을 지정합니다. This fiddle에는 내가 말하는 것에 대한 예가 있습니다.

출처

2012-08-22 19:39:35

z- 인덱스가 작동하지 않는 경우

답변

관련 문제