내 도구 설명에 z- 인덱스가 작동하지 않습니다.

내 site 상단의 회전식 캐 내에서 두 종류의 툴팁을 사용하고 있습니다. 첫 번째는 회전 목마 느릅 나무 사용과이 스타일을 구현 하나입니다 : 첫 번째 이미지로 볼 수는 래퍼 사업부를 통해가는 경우내 도구 설명에 z- 인덱스가 작동하지 않습니다.

#carousel div:hover span, 
     #carousel div.hover span { 
      background-color: #333; 
      color: #fff; 
      display: inline-block; 
      width: 500px; 
      padding: 2px 0; 
      margin: 0 0 0 -500px; 
      position: absolute; 
      bottom: 0; 
      left: 50%; 
      border-radius: 3px; 
      z-index: 600 !important; 
     }

이 회색 상자가, 그것을 잘라 것입니다. 비록 내가 Z- 색인을 사용하고있다.

.tooltip4:hover em { 
z-index: 600; 
text-align: center; 
font-style: normal; 
display: block; 
position: absolute; 
top: 50px; 
left: 50px; 
padding: 5px; 
color: #fff; 
/*border: 1px solid #bbb;*/ 
background-color:rgba(16,110,99,0.9); 
box-shadow: 0 0 7px 2px #1B8478; 
width:400px; 

}

이 하나가 두 번째 이미지에 사용되며, 당신도 그것을 볼 수 없습니다, 그것은 같은 효과가 있어야합니다

두 번째는 하나 개의 느릅 나무는 클래스 "tooltip4"를 사용하다 왼쪽에 회전 목마.

이러한 문제에 대한 해결책이 있습니까?

출처

2013-07-09 Exia0890

#carousel div:hover span,#carousel div.hover span {margin: 0 0 0 -90px;}

이 클래스에서

제거 Z- 인덱스 #carousel div

이 클래스 귀하의 답변에 대한

.tooltip4:hover em {top: -243px;left: -197px;}

출처

2013-07-09 06:57:44

답변을 주셔서 감사합니다. 실제로 두 번째 툴팁을 볼 수는 있지만 '오버플로 : 숨김'으로 인해 여전히 하단에서 잘립니다. 가능한 경우 머리글 외부에 표시하고 싶습니다. – Exia0890

당신은 위치를 사용할 수 있습니다 : 이것을 고정시키고 오프 코스로 당신의 필요에 따라 상단과 좌측 값을 변경하십시오 –

고마워요, 작동합니다. 그러나 그것은 여전히 파이어 폭스와 끊어져 있습니다. – Exia0890

실제로 문제는 특정 너비와 높이를 가진 span을 div.caroufredsel_wrapper 내에 두었 기 때문에 div 외부에서 잘린 것입니다. 범위를 높은 수준 (예 : body 또는 header 또는 div#wrapper)으로 설정하면 작동합니다.

출처

2013-07-09 05:51:36 Dave

감사 편집은'div.caroufredsel_wrapper' 폭은'래퍼와 같은 것 같다 '하나. 툴팁을 볼 수없는 이유는 오버 플로우 때문에 발생하는 것 같지만 CSS로 표시하면 이벤트입니다. 도구 팁을 볼 수는 있지만 슬라이딩 할 때 이미지가 오버 플로우됩니다. 나는 각 이미지에 대한 (이후 당신이 Z- 인덱스 레벨에 대해 말하지 않는다면) 높은 레벨에서 span을 배치하는 방법을 모른다. – Exia0890

내 도구 설명에 z- 인덱스가 작동하지 않습니다.

답변

관련 문제