div를 다른 모든 항목 앞에 표시 하시겠습니까?

Question

오후.

개체 위로 마우스를 가져 가면 도구 설명이 표시되는 HTML 페이지에 개체가 생성됩니다.

모든 도구 앞에 도구 팁이 표시되지 않는 것 같습니다. 그것은 단지 그것도 관련된 하나의 앞에 앉아있는 것 같습니다.

다음은 예입니다 여기에 CodePen에 대한 링크입니다 : 당신은 빨간색 상자 위에 마우스를 올려 경우 http://codepen.io/anon/pen/mhpAo

, 당신은 내가 앞에 필요, 끝이 녹색 상자 뒤에 앉아 볼 수 있습니다.

많은 감사, 마이클.

HTML

<div class="red">Red 
<div id="red_tip">A tip for red goes here</div> 
</div> 

<div class="green">Green 
<div id="green_tip">A tip for green goes here</div> 
</div> 

CSS

.red 
{ 
    height: 75px;width: 75px; 
    background: red; 
    position: absolute;z-index: 1; 
} 

#red_tip 
{ 
    display: none; 
} 

.red:hover #red_tip 
{ 
    display: block; 
    background: blue; 
    position: absolute; z-index:2; 
    top:50px; left:50px; 
    width: 100px; 
} 

.green 
{ 
    height: 75px;width: 75px; 
    background: green; 
    position: absolute; z-index: 1; 
    top: 75px; 
} 

#green_tip 
{ 
    display: none; 
} 

.green:hover #green_tip 
{ 
    display: block; 
    background: blue; 
    position: absolute; z-index:2; 
    top:50px; left:50px; 
    width: 100px; 
} 

Answer 1

을 -1로 동일한 z- 인덱스, 그들 중 더 높은 z- 인덱스는 실제로 아무런 차이를 만들지 않습니다. 따라서이 순서가 동일하게 유지되는 한 빨간색 div보다 녹색보다 높은 z- 인덱스를 제공 할 수 있습니다.

여기 Z- 인덱스 적재 상황에 대한 몇 가지 유용한 정보가있다 : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context 각 스태킹 컨텍스트는 자체 포함되어

: 요소의 내용을 적층 한 후, 전체 요소는 부모의 스택 순서로 간주됩니다 스태킹 컨텍스트.

Answer 2

은 녹색 다이빙 위치를 만들어 상대와 Z- 인덱스만큼 빨간색과 녹색으로 된 div가 가지고있는

.red 
{ 
    height: 75px;width: 75px; 
    background: red; 
    position: absolute;z-index: 1; 
} 

#red_tip 
{ 
    display: none; 
} 

.red:hover #red_tip 
{ 
    display: block; 
    background: blue; 
    position: absolute; z-index:15; 
    top:50px; left:50px; 
    width: 100px; 
} 

.green 
{ 
    height: 75px;width: 75px; 
    background: green; 
    position: relative; z-index:-1; 
    top: 75px; 
} 

#green_tip 
{ 
    display: none; 
} 

.green:hover #green_tip 
{ 
    display: block; 
    background: blue; 
    position: absolute; z-index:2; 
    top:50px; left:50px; 
    width: 100px; 
} 

Answer 3

그건 까다 롭습니다. .red 스타일에서는 z-index: 2;으로 설정하십시오.

.red 
{ 
    height: 75px;width: 75px; 
    background: red; 
    position: absolute;z-index: 2; 
} 

Answer 4

.red 및 zip에서 z- 색인을 제거하면 문제가 해결됩니다. 또한 본문 여백을 0으로 설정해야합니다. 이렇게하면 두 div가 현재 겹치는 것을 방지 할 수 있습니다.

body { 
    margin: 0; 
    } 

.red { 
    height: 75px; 
    width: 75px; 
    background: red; 
    position: absolute; 
    } 

#red_tip { 
    display: none; 
    } 

.red:hover #red_tip { 
    display: block; 
    background: blue; 
    position: absolute; z-index:2; 
    top:50px; left:50px; 
    width: 100px; 
    } 

.green { 
    height: 75px; 
    width: 75px; 
    background: green; 
    position: absolute; 
    top: 75px; 
    } 

#green_tip { 
    display: none; 
    } 

.green:hover #green_tip { 
    display: block; 
    background: blue; 
    position: absolute; z-index:2; 
    top:50px; left:50px; 
    width: 100px; 
    } 

Answer 5

클래스를 래핑하여 단순화 할 수도 있습니다. 그런 다음 클래스 툴팁을 호출하면됩니다.

a.tooltips { 
position: relative; 
display: inline; 
margin:50px 0 0 50px; 
top:50px; 
} 
a.tooltips span { 
position: absolute; 
width:140px; 
color: #FFFFFF; 
background: #000000; 
height: 30px; 
line-height: 30px; 
text-align: center; 
visibility: hidden; 
border-radius: 6px; 
} 
a.tooltips span:after { 
content: ''; 
position: absolute; 
top: 100%; 
left: 50%; 
margin-left: -8px; 
width: 0; height: 0; 
border-top: 8px solid #000000; 
border-right: 8px solid transparent; 
border-left: 8px solid transparent; 
} 
a:hover.tooltips span { 
visibility: visible; 
opacity: 0.8; 
bottom: 30px; 
left: 50%; 
margin-left: -76px; 
z-index: 999; 
} 

그런 다음, 그렇게

<a class="tooltips" href="#">CSS Tooltips 
<span>Tooltip</span></a>