오브젝트가 위치에 반응하지 않음 : 상대적

Question

브라우저가 수축되었지만 움직이지 않을 때 사각형 버튼이 반응하기를 원합니다. 뭐가 문제 야? 도와 주셔서 감사합니다!

<div class="firstSection"> 
     <div class="menuBox"></div> 

.firstSection { 
    background-image: url(/Users/omaramin/Documents/Competition/project/mainBanner.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    position: absolute; 
    top:-144px; 
    width: 100%; 
    height: 100%; 
    font-family: Bariol; 
    color: #ffffff; 
} 

.menuBox { 
    position: relative; 
    margin-left: 200px; 
    margin-top: 200px; 
    width: 35px; 
    height: 35px; 
    border-style: solid; 
    border-width: 1px; 
    border-radius: 2px; 
} 

Answer 1

픽셀 기반 위치 지정을 사용하고 대신 비율을 사용하십시오.

.menuBox { 
    position: relative; 
    margin-left: 20%; 
    margin-top: 200px; 
    width: 35px; 
    height: 35px; 
    border-style: solid; 
    border-width: 1px; 
    border-radius: 2px; 
} 

희망이 있습니다.