상대적인 위치에있는 div 두 개를 겹쳐 놓습니다.

Question

상대 위치 지정을 사용하여 서로 위에 놓고 싶은 두 개의 div가 있습니다.

<div id="display_background"> 
</div> 
<div id="display_foreground"> 
    <div id="home"> 
     This is the home page 
    </div> 

    <div id="info"> 
     This is the info page 
    </div> 

    <div id="contact"> 
     This is the contact page 
    </div> 
</div> 

div를 위치를 배경 이미지로 조정해야하므로 상대 위치 지정을 사용하고 있습니다. 당신은 절대로 위치를 변경하고 상대 위치와 래퍼를 추가 할 수 있습니다

$('#display_background').css({ 
    'background-color': 'white', 
    opacity: 0.5, 
    position: 'relative', 
    left: '66%', 
    top: '66%', 
    width: '425px', 
    height: '330px', 
    border: '1px solid' 
}); 
$('#display_foreground').css({ 
    position: 'relative', 
    left: '66%', 
    top: '66%', 
    width: '20%', 
    height: '25%' 
}); 

Answer 1

:

여기 내가 사용 CSS를합니다. 이 예제를 참조하십시오 : http://jsfiddle.net/fKmYN/19/ Greetings, Gijoey