HTML 요소를 다른 요소 위에 겹치게하려면 어떻게해야합니까?

Question

나는이 사이트와 같이 구름 배경을 움직이는 CSS3을 가지고있다.

http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

http://cssdeck.com/labs/animated-clouds-background-pure-css3

• 그러나 구름은 텍스트의 상단에 계속오고 그리고 그들은 그 위에 마우스를 가져 가면 나는 텍스트를 볼 수 없습니다. 이 요소를 구름 꼭대기에 올릴 수있는 방법이 있습니까?

Answer 1

은 HTML 구조는 다음과 같은 경우 :

<div id="sky-container"> 
    <div id="cloud-container"> 
    ... 
    </div> 
</div> 
<div id="text-container"> 
    ... 
</div> 

축하합니다, 당신은 이미 당신은 정확하게 위치 (절대 위치) 할 필요가 완료됩니다. 텍스트는 이미 구름 위에 나타납니다. HTML이 다음과 같은 경우 :

<div id="cloud-container"> 
    ... 
</div> 
<div class="background"> 
    <div class="background"> 
    <div class="text"> 
     ... 
    </div> 
    <div class="text"> 
    ... 
    </div> 
    ... 
</div> 

즉, 배경이 하나도없는 경우에도 배경과 텍스트 사이에 구름을 삽입 할 수 있습니다. HTML의 텍스트와 배경을 분리하기 만하면됩니다. 당신은 텍스트와 배경 사이의 구름을 배치 할 z-index을 사용할 수 있습니다 : 기본 z-index가 0이기 때문에 당신이 알고있는 경우에 클라우드 컨테이너가 페이지의 마지막 요소가 될 것입니다,

.background{ 
    z-index:0; 
} 
#cloud-container{ 
    z-index:1; 
} 
.text{ 
    z-index:2; 
} 

을 (그리고 하나입니다 또한 position 속성이 명시 적으로 absolute, relative 또는 fixed에를 설정해야 할 필요가있는 Z- 인덱스와

.text{ 
    z-index:1; 
} 

의 요소 :) position:absolute를 얻을, 당신은에 CSS를 단순화 할 수 있습니다.