CSS를 사용하여 HTML 요소를 다른 요소 위에 놓는 방법

Question

HTML 및 CSS를 사용하여 작은 아이콘을 배치하려는 슬라이더가 있습니다. 그러나 둘 다 절대 위치이고 슬라이더가 아이콘을 숨기고 있습니다. 나는 자바 스크립트 파일에서 슬라이더를 제거 할 때 내가 원하는하지만 슬라이더는 중지로,이 아이콘이 표시되는지

가

#nav { 
    position:absolute; 
    left: 49%; 
    top: 89%; 
} 

주, 그래서 아이콘이 방법을 얻을 수 있습니다 :

아이콘에 대한 CSS 코드는 이것이다 슬라이더 위에 놓습니다.

Answer 1

이 nav 아이콘에 z-index을 추가하십시오. 아래처럼 CSS를 업데이트하십시오.

#nav { 
position:absolute; 
left: 49%; 
top: 89%; 
z-index:2; 
} 

Answer 2

이 당신이
http://jsfiddle.net/LUQjb/3/

, HTML

<div class="outerdiv"> 
<div class="youricon"> 
</div></div> 

CSS-

.outerdiv{ 
    position:relative; 
    width:400px; 
    height:400px; 
    background-color:black; 
} 

.youricon{ 
    position:absolute; 
    width:200px; 
    height:200px; 
    background-color:red; 
    top:50px; 
    left:50px; 
} 

Answer 3

슬라이더는 미리 정의 된 Z-index 속성을 가진 도움 말이죠 것입니다. 따라서 아이콘에 더 높은 z- 인덱스 속성을 추가해야합니다.

#nav { 
    position:absolute; 
    left: 49%; 
    top: 89%; 
    z-index:/* As per you requirment */; 
} 

Answer 4

작은 아이콘에 슬라이더 이미지보다 더 많은 Z- 색인을 적용하십시오!

.slider{ 
z-index: 100; } 

.small-icon{ z-index: 200; } 

Z-index의 모든 트릭!