브라우저 크기를 조정하거나 작은 화면에서 CSS 위치가 변경되었습니다.

Question

웹 사이트가 있고 사용자가 로그인하면 사용자 이름을 클릭 할 수 있으며 그 아래의 상자는 jQuery를 사용하여 나타납니다. 문제는 상자가 내 브라우저에 따라 배치되어 있으며 올바르게 만드는 방법을 모르겠다는 것입니다.

내가 사용하고 CSS 코드가 위치합니다 : codexvideos.com 어떻게 보이는지

이미지 : 당신은 당신이 더 잘 이해하는 사이트를 방문하는 경우

z-index: 9999; 
position: absolute; 
top: 100px; 
left: 116px; 

는

웹 사이트로 로그인 올바른 경우 : http://i.stack.imgur.com/vOBiy.png

작은 화면, 크기가 조정 된 화면 또는 다른 브라우저에서 보이는 방식입니다. http://i.stack.imgur.com/rmMh6.png

어떤 의견을 게시하지 마십시오 또는 사용자가 설정 한 후 래퍼 내부의 메뉴를 배치하고 필요

Answer 1

절대 위치 요소 정적 이외의 위치가 제 부모 요소에 대해 위치된다 : 다음

.user_bar { 
    position: relative; 
} 

그리고

는 같은 행의 절대 위치 지정된 요소를 설정. 따라서 div # wrap 선언에 position: relative을 추가하고 그에 따라 드롭 요소의 왼쪽 위치를 조정하십시오.

Answer 2

아바타 등 변경 css to left: 0px; top: 30px; < - 상단 메뉴 항목의 높이에 따라 달라집니다.

Answer 3

절대 위치 요소의 상위 div를 position : relative로 설정하면 절대 위치는 문서 본문이 아닌 해당 요소를 기준으로합니다.

left: 34px; 
top: 34px;